{"id":192,"date":"2023-08-13T10:06:22","date_gmt":"2023-08-13T07:06:22","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=192"},"modified":"2024-01-14T14:13:05","modified_gmt":"2024-01-14T12:13:05","slug":"scrolling-effects-vertical-scroll","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/","title":{"rendered":"Scrolling Effects &#8211; Vertical Scroll"},"content":{"rendered":"\n<p>The Vertical Scroll scrolling effect is a classic parallax effect. Vertical scroll makes the element move at a different speed than the page while scrolling, in the direction and speed of your choosing.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Add Scrolling Effects to Your Website\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/5waeDUJpAMo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator\" \/>\n\n\n\n<h3 class=\"wp-block-heading\">Advanced or Style &gt; Background<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Motion Effects<\/h4>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>Scrolling Effects<\/strong>: Slide to ON<\/li><li><strong>Vertical Scroll<\/strong>: Click pencil edit icon<br><span style=\"padding-left: 10px\"><strong>Direction<\/strong>: Choose Up or Down<\/span><br><span style=\"padding-left: 45px\"><strong>Speed<\/strong>: Set motion speed of vertical scroll from 0 to 10<\/span><br><span style=\"padding-left: 45px\"><strong>Viewport<\/strong>: Determine when to begin the movement, based on viewport height (the visible size of the device screen). For example, if the viewport value is set between 50 &#8211; 100, the movement starts only after you scroll half the viewport height.<\/span><\/li><li><strong>Apply Effects On<\/strong>: Select to apply the motion effects on Desktop, Tablet, and\/or Mobile devices<\/li><li><strong>Effects Relative To<\/strong>: Choose from Default, Viewport, or Entire Page<\/li><\/ol>\n\n\n\n<p class=\"callout-yellow\"><strong>Note<\/strong>: The viewport value is calculated according to the height of the viewport (meaning the visible size of the screen), and not to the height of the full page. This is true in all situations, except for elements with a fixed position. See image below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"550\" height=\"1024\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport-550x1024.jpg\" alt=\"\" class=\"wp-image-2515\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport-550x1024.jpg 550w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport-161x300.jpg 161w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport-768x1429.jpg 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport-826x1536.jpg 826w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport.jpg 860w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create a classic parallax effect with Scrolling Effects<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65a3cfd2a91053acaad3ae4c"],"footnotes":""},"categories":[1437],"tags":[1389,1388,1387,1390,1398,1235],"class_list":["post-192","post","type-post","status-publish","format-standard","hentry","category-widgets","tag-advanced","tag-agency","tag-essential","tag-expert","tag-legacy-essential","tag-pro"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Scrolling Effects - Vertical Scroll | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Scrolling Effects - Vertical Scroll in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scrolling Effects - Vertical Scroll | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Scrolling Effects - Vertical Scroll in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-13T07:06:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-14T12:13:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"860\" \/>\n\t<meta property=\"og:image:height\" content=\"1600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Scrolling Effects &#8211; Vertical Scroll\",\"datePublished\":\"2023-08-13T07:06:22+00:00\",\"dateModified\":\"2024-01-14T12:13:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/\"},\"wordCount\":187,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport-550x1024.jpg\",\"keywords\":[\"Advanced\",\"Agency\",\"Essential\",\"Expert\",\"Legacy Essential\",\"Pro\"],\"articleSection\":[\"Widgets\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/\",\"url\":\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/\",\"name\":\"Scrolling Effects - Vertical Scroll | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport-550x1024.jpg\",\"datePublished\":\"2023-08-13T07:06:22+00:00\",\"dateModified\":\"2024-01-14T12:13:05+00:00\",\"description\":\"Learn everything about Scrolling Effects - Vertical Scroll in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport.jpg\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport.jpg\",\"width\":860,\"height\":1600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build with the Editor\",\"item\":\"https:\/\/elementor.com\/help\/build-with-the-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/build-with-the-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Scrolling Effects &#8211; Vertical Scroll\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Scrolling Effects - Vertical Scroll | Elementor","description":"Learn everything about Scrolling Effects - Vertical Scroll in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/","og_locale":"en_US","og_type":"article","og_title":"Scrolling Effects - Vertical Scroll | Elementor","og_description":"Learn everything about Scrolling Effects - Vertical Scroll in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/","og_site_name":"Help","article_published_time":"2023-08-13T07:06:22+00:00","article_modified_time":"2024-01-14T12:13:05+00:00","og_image":[{"width":860,"height":1600,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport.jpg","type":"image\/jpeg"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Scrolling Effects &#8211; Vertical Scroll","datePublished":"2023-08-13T07:06:22+00:00","dateModified":"2024-01-14T12:13:05+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/"},"wordCount":187,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport-550x1024.jpg","keywords":["Advanced","Agency","Essential","Expert","Legacy Essential","Pro"],"articleSection":["Widgets"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/","url":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/","name":"Scrolling Effects - Vertical Scroll | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport-550x1024.jpg","datePublished":"2023-08-13T07:06:22+00:00","dateModified":"2024-01-14T12:13:05+00:00","description":"Learn everything about Scrolling Effects - Vertical Scroll in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport.jpg","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/viewport.jpg","width":860,"height":1600},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/scrolling-effects-vertical-scroll\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Build with the Editor","item":"https:\/\/elementor.com\/help\/build-with-the-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/build-with-the-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Scrolling Effects &#8211; Vertical Scroll"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=192"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/192\/revisions"}],"predecessor-version":[{"id":165405,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/192\/revisions\/165405"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}