Introduction
See Skrollr documentation for more information. Make sure to look at the Anchor Position Guide PDF to help understand positioning.
The current scroll animations are:
- Fade In – This effect will fade in the item at a set scroll point
- Fade Out – This effect will fade out the item at a set scroll point
- Fade In/Fade Out – This effect will fade in the item at a set scroll point, and then fade out the item at another set scroll point
- Scale with Fade Out – This effect will scale the item larger, then scale the item out and fade at the same time
- Rotate Up Left – This effect will rotate the item up and to the left and fade the item out at the same time
- Rotate Up Right – This effect will rotate the item up and to the right and fade the item out at the same time
- Custom – create your own scroll animation (see Skrollr documentation link above for more information)
Examples of the scroll animations can be found below. We plan to add more pre-defined scroll animations, so keep an eye out for them in future updates.
Fade In Scrolling Animation
This animation fades in as the element is scrolled into view
Fade In scrolling animation
Aliquam eu nisl ultrices, aliquet tortor faucibus, convallis magna. Quisque tempor metus vel nisl mollis, sit amet sollicitudin elit pretium. Phasellus non lacus convallis, ultrices purus eget, molestie risus. Quisque consectetur felis non nulla accumsan tempor.
Quisque id massa imperdiet ante fringilla volutpat nec porta sem. In ut enim vel mi sodales facilisis non id ipsum. Nunc vestibulum tortor volutpat orci tincidunt suscipit eget quis lorem. Nulla euismod lorem eu elit ornare, ac consectetur sem elementum. Aenean interdum augue sit amet justo ultrices gravida. Duis varius felis nec lectus ornare ultricies. Phasellus non lacus convallis, ultrices purus eget, molestie risus. Ut euismod urna et sapien sollicitudin, sed convallis dui hendrerit. Proin non tortor venenatis nisl condimentum viverra sit amet eu ligula. Vestibulum non enim blandit, eleifend neque vel, convallis tellus. Ut vel nibh consectetur, sagittis tellus vel, ultricies purus.
Fade Out Scrolling Animation
This animation fades out as the element gets close to reaching the top of the page
Fade In/Fade Out Scrolling Animation
Nunc vestibulum tortor volutpat orci tincidunt suscipit eget quis lorem. Nullam non lorem mollis, cursus libero non, consectetur erat. Sed tristique justo id ipsum luctus fringilla.
Quisque consectetur felis non nulla accumsan tempor. Nam ac dolor et lorem euismod aliquet. Donec feugiat libero eget est eleifend, ut fermentum libero viverra. Aliquam iaculis tortor ac dapibus condimentum. Nullam quis nulla pulvinar, auctor mauris ultricies, interdum felis. Aliquam iaculis tortor ac dapibus condimentum. Quisque vel ante non ipsum malesuada egestas. Duis accumsan risus quis metus dapibus bibendum. Integer id velit scelerisque lectus eleifend mattis. Quisque tempor metus vel nisl mollis, sit amet sollicitudin elit pretium. Nam in est in tortor pretium posuere.
Rotate Up Left and Rotate Up Right Scrolling Animations
The following two panels will rotate up to either side while scrolling down.
Rotate left scrolling animation
Proin ut lacus ac mi sollicitudin interdum. Nam cursus urna sit amet lacus laoreet, pulvinar laoreet lectus lobortis. Curabitur varius odio a adipiscing tempor. Maecenas ultricies ante quis sodales accumsan. Nulla euismod justo adipiscing ante porttitor adipiscing.
Rotate right scrolling animation
Duis euismod arcu sit amet scelerisque iaculis. In ut enim vel mi sodales facilisis non id ipsum. Donec ut tortor in risus eleifend porttitor. Curabitur eu nisl in tortor lacinia suscipit eu quis nulla. Quisque vitae elit accumsan, mattis magna id, bibendum dui.
Scale with Fade Out Scrolling Animation
This animation scales and fades out while scrolling
You can also create your own custom scrolling animations!
Explore More Shortcodes
- Alert
- Animated Popular
- Animated Image
- Animated Scroll New
- Audio
- Badge
- Blockquote
- Blog
- Blur New
- Books
- Button
- Chart
- Clients
- Code
- Collapsibles
- Content Box
- Content Section Popular
- Counter
- Coupons
- Custom Post Type
- Definitions
- Device Mockups
- Divider Popular
- Dropcap
- Emphasis
- Events
- FAQ
- Filler
- Flip Box Popular
- Fullscreen Video
- Gallery Popular
- Google Docs Viewer
- Guests
- Heading
- Highlight
- Hover Box
- Horizontal Ruler
- Icon Popular
- Icon List
- If New
- Image
- Image Compare
- Jobs
- Label
- Lead
- Lightbox
- Locations
- Map
- Masonry
- Members
- Menu
- Post Meta Data
- Movies
- Music
- News
- Overlay Popular
- Panel New
- Parallax Scene Popular
- Permalink
- Person
- Popover
- Portfolio
- Post Fields
- Post Media
- Pricing Table
- Progress
- Project
- Promotional Box
- QR Code
- Quotes
- Recent Books
- Recent Clients
- Recent Coupons
- Recent Events
- Recent Jobs
- Recent Locations
- Recent Movies
- Recent Music
- Recent News
- Recent Portfolios
- Recent Posts
- Recent Projects
- Recent Quotes
- Recent Recipes
[intense_content_section]
<h2>Introduction</h2>
[intense_row padding_top="0"]
[intense_column size="12" medium_size="12"]
The animated scroll shortcode allows you to animate just about anything on a page. Try scrolling down the page and then scrolling back up. You'll see the animations happen in both directions.
<br /><br />See <a href="https://github.com/Prinzhorn/skrollr#absolute-vs-relative-mode" target="_blank">Skrollr documentation</a> for more information. Make sure to look at the <a href="https://raw.github.com/Prinzhorn/skrollr/master/guide/anchor-position-guide.pdf" target="_blank">Anchor Position Guide</a> PDF to help understand positioning.
The current scroll animations are:
<ul>
<li>Fade In - This effect will fade in the item at a set scroll point</li>
<li>Fade Out - This effect will fade out the item at a set scroll point</li>
<li>Fade In/Fade Out - This effect will fade in the item at a set scroll point, and then fade out the item at another set scroll point</li>
<li>Scale with Fade Out - This effect will scale the item larger, then scale the item out and fade at the same time</li>
<li>Rotate Up Left - This effect will rotate the item up and to the left and fade the item out at the same time</li>
<li>Rotate Up Right - This effect will rotate the item up and to the right and fade the item out at the same time</li>
<li>Custom - create your own scroll animation (see Skrollr documentation link above for more information)</li>
</ul>
Examples of the scroll animations can be found below. We plan to add more pre-defined scroll animations, so keep an eye out for them in future updates.
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section id="scroll_in1" background_type="image" image="781" imagemode="parallax" image_horizontal_position="center"]
[intense_animated_scroll target_id="scroll_in1" effect="fadein" effect_code="data-bottom-top='opacity: 0' data-center-top='opacity: 1'"]
[intense_heading font_size="45" line_height="54" font_color="#444444" align="center"]
Fade In Scrolling Animation
[/intense_heading]
[/intense_animated_scroll]
[intense_animated_scroll target_id="scroll_in1" effect="fadein" effect_code="data-bottom-top='opacity: 0' data-center-top='opacity: 1'"]
[intense_heading font_color="#444444" align="center" tag="h2"]
This animation fades in as the element is scrolled into view
[/intense_heading]
[/intense_animated_scroll]
[intense_animated_scroll target_id="scroll_in1" effect="fadein" effect_code="data-bottom-top='opacity: 0' data-center-top='opacity: 1'"]
[intense_panel shadow="8" title="Fade In scrolling animation" title_tag="h4" title_color="#444444" title_font_color="#ffffff" color="#cccccc"]
[intense_filler paragraphs="2" start_with_lorem="0"]
[/intense_panel]
[/intense_animated_scroll]
[/intense_content_section]
[intense_content_section id="scroll_in2" background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
[intense_animated_scroll target_id="scroll_in2" effect="fadeout" effect_code="data-150-top='opacity: 1' data-top='opacity: 0'"]
[intense_heading font_size="45" line_height="54" font_color="#444444" align="center"]
Fade Out Scrolling Animation
[/intense_heading]
[intense_heading font_color="#444444" align="center" tag="h2"]
This animation fades out as the element gets close to reaching the top of the page
[/intense_heading]
[/intense_animated_scroll]
[intense_animated_scroll target_id="scroll_in2" effect="fadeout" effect_code="data-150-top='opacity: 1' data-top='opacity: 0'"]
[intense_gallery size="small320" columns="5" id="3698" include="756,755,751,761,760" no_link="1"]
[/intense_animated_scroll]
[/intense_content_section]
[intense_content_section id="scroll_in3"]
[intense_animated_scroll target_id="scroll_in3" effect="fadeinout" effect_code="data-bottom-top='opacity: 0' data-center-top='opacity: 1' data-150-top='opacity: 1' data--50-top='opacity: 0'"]
[intense_row]
[intense_column size="9" medium_size="9" small_size="12" extra_small_size="12"]
[intense_heading font_size="45" line_height="54" font_color="#444444"]
Fade In/Fade Out Scrolling Animation
[/intense_heading]
[intense_filler paragraphs="2" start_with_lorem="0"]
[/intense_column]
[intense_column size="3" medium_size="3" small_size="12" extra_small_size="12"]
[intense_image image="3074" size="square400" title="Digital Globe" border_radius="50%"]
[/intense_column]
[/intense_row]
[/intense_animated_scroll]
[/intense_content_section]
[intense_content_section id="scroll_in4" background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
[intense_heading font_size="45" line_height="54" font_color="#444444" align="center"]
Rotate Up Left and Rotate Up Right Scrolling Animations
[/intense_heading]
[intense_heading font_color="#444444" align="center" tag="h2"]
The following two panels will rotate up to either side while scrolling down.
[/intense_heading]
[intense_row]
[intense_column size="6" medium_size="6" small_size="12" extra_small_size="12"]
[intense_animated_scroll effect="custom" effect_code="data-175-top='opacity:1;transform:rotate(0deg);transform-origin:0 0;' data-top='opacity:0;transform:rotate(-90deg);'"]
[intense_panel shadow="8" title="Rotate left scrolling animation" title_tag="h4" title_color="#444444" title_font_color="#ffffff" color="#cccccc"]
Duis euismod arcu sit amet scelerisque iaculis. In ut enim vel mi sodales facilisis non id ipsum. Donec ut tortor in risus eleifend porttitor. Curabitur eu nisl in tortor lacinia suscipit eu quis nulla. Quisque vitae elit accumsan, mattis magna id, bibendum dui.
Proin ut lacus ac mi sollicitudin interdum. Nam cursus urna sit amet lacus laoreet, pulvinar laoreet lectus lobortis. Curabitur varius odio a adipiscing tempor. Maecenas ultricies ante quis sodales accumsan. Nulla euismod justo adipiscing ante porttitor adipiscing.
[/intense_panel]
[/intense_animated_scroll]
[/intense_column]
[intense_column size="6" medium_size="6" small_size="12" extra_small_size="12"]
[intense_animated_scroll effect="custom" effect_code="data-175-top='opacity:1;transform:rotate(0deg);transform-origin:100% 0;' data-top='opacity:0;transform:rotate(90deg);'"]
[intense_panel shadow="8" title="Rotate right scrolling animation" title_tag="h4" title_color="#444444" title_font_color="#ffffff" color="#cccccc"]
Proin ut lacus ac mi sollicitudin interdum. Nam cursus urna sit amet lacus laoreet, pulvinar laoreet lectus lobortis. Curabitur varius odio a adipiscing tempor. Maecenas ultricies ante quis sodales accumsan. Nulla euismod justo adipiscing ante porttitor adipiscing.
Duis euismod arcu sit amet scelerisque iaculis. In ut enim vel mi sodales facilisis non id ipsum. Donec ut tortor in risus eleifend porttitor. Curabitur eu nisl in tortor lacinia suscipit eu quis nulla. Quisque vitae elit accumsan, mattis magna id, bibendum dui.
[/intense_panel]
[/intense_animated_scroll]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section id="scroll_in5"]
[intense_animated_scroll target_id="scroll_in5" effect="custom" effect_code="data-bottom-top='opacity: 1' data-center-bottom='transform: translate3d(0px, 0px, 0px) scale(1, 1) rotate(0deg);' data-150-top='transform: translate3d(0px, 0px, 0px) scale(1.2, 1.2) rotate(0deg);' data-top='transform: translate3d(0px, 100px, 0px) scale(.25, .25) rotate(0deg); opacity:0;'"]
[intense_heading font_size="45" line_height="54" font_color="#444444" align="center"]
Scale with Fade Out Scrolling Animation
[/intense_heading]
[intense_heading font_color="#444444" align="center" tag="h2"]
This animation scales and fades out while scrolling
[/intense_heading]
[/intense_animated_scroll]
[intense_row]
[intense_column size="4" medium_size="4" small_size="12" extra_small_size="12"]
[intense_image image="760" size="medium500"]
[/intense_column]
[intense_column size="4" medium_size="4" small_size="12" extra_small_size="12"]
[intense_image image="761" size="medium500"]
[/intense_column]
[intense_column size="4" medium_size="4" small_size="12" extra_small_size="12"]
[intense_image image="751" size="medium500"]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section id="scroll_in6" background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed" padding_top="50" padding_bottom="50"]
[intense_heading font_size="35" line_height="43" font_color="#444444" align="center"]
You can also create your own custom scrolling animations!
[/intense_heading]
[/intense_content_section]
[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]