How to Create Moving Image Shadows on Scroll in Divi - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress Elegant Themes Video: How to Create Moving Image Shadows on Scroll in Divi.
Go to the blog post: https://www.elegantthemes.com/blog/divi-resources/how-to-create-moving-image-shadows-on-scroll-in-divi

In this tutorial, we are going to show you how to create moving image shadows on scroll in Divi. The trick is to find a PNG image with a unique shape so that, once the image is transformed, it will keep the shape and look like a realistic shadow of the image. After the image/shadow is ready, we can add a few scroll effects to move the shadow as the user scrolls. This unusual (yet familiar) effect will add a stunning design element that will bring new life to your site.

If you don't have Divi yet, you can learn more about this powerful theme on our website using the link below:
https://www.elegantthemes.com/gallery/divi/

Want to give back to the community? Share your empowering knowledge, skills, experience, and creativity on the Elegant Themes blog by contributing:
https://www.elegantthemes.com/blog/community/elegant-themes-blog-submissions

Published: Wednesday, August 5, 2020 8:04 PM
Category: Wordpress Elegant Themes

38 Views

Related Videos

How to Create an Image Swap on Scroll with Divi

by Best Webhosting Added 3 years ago 40 Views / 0 Likes

Creating interactive design comes with many advantages. One of them is the fact that you can fit more visual content inside a single section and determine how the visual content shows up while visitors are scrolling. It elevates the overall user experience visitors have on your website and takes your web design efforts to the next level. In today’s tutorial, we’ll show you how to create an image swap on scroll using Divi’s new scroll effects. We’ll se
How to Create a Breakaway Image Transition with Divi’s Scroll Effects

by Best Webhosting Added 3 years ago 40 Views / 0 Likes

Divi’s Scroll Effects allow us to create exceptional transition animations that can wow visitors with an eye-catching design. Images, in particular, can showcase the power of these scroll effects in surprising ways. In this tutorial, we are going to explain step-by-step how to create a breakaway image transition with Divi’s scroll effects. This effect was originally featured on the demo page. The effect involves slicing images beforehand using a photo
Popular
Using Hover Text Shadows to Create Interactive Content with Divi

by Best Webhosting Added 4 years ago 106 Views / 0 Likes

Making your website stand out from similar websites can be hard but once you manage to do it, it’s almost always worth the effort and thought that has been put into it. To help you get inspired, we’re going to show you how to create interactive content when building websites with Divi. The example that we’ll recreate in this tutorial will work particularly well for any about page you’re working on. You’ll be able to share facts or company information
How to Create Module Overlaps on Scroll with Divi’s Scroll Effects

by Best Webhosting Added 3 years ago 25 Views / 0 Likes

Using overlaps in your design has increased in popularity over the past few years. It gives your design a more abstract look and feel. At the same time, it helps you save space, which in turn limits the vertical scrolling that is required. Inside Divi, there are a couple of ways to effortlessly add overlaps to modules. You can also go the extra mile and add some scroll interaction! In today’s Divi tutorial, we’ll show you how to create subtle module o
Moving Text on Scroll - Html CSS and Javascript

by Best Webhosting Added 4 years ago 100 Views / 0 Likes

Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: Skylike - Dawn Link: https://youtu.be/Jg9nDEtqWV0
How to Fan Out Images on Scroll to Promote an Image Gallery in Divi

by Best Webhosting Added 1 year ago 24 Views / 0 Likes

Knowing how to fan out images with Divi’s scroll effects can be a subtle and impressive design element to help promote an image gallery on a landing page. The idea is to engage users as they scroll down the page by fanning out images like a hand of playing cards. In this tutorial, we are going to create a clean section layout for promoting an image gallery that includes a collection of images that fan out on scroll. You can use any images you want wit
How to Reveal Your Image Gallery with a Sliding Puzzle Scroll Effect in Divi

by Best Webhosting Added 3 years ago 45 Views / 0 Likes

Image galleries are a favorite destination on most websites. And, in many cases, it may be best to keep those image galleries happy and static, letting the images work their magic. But, adding a sliding puzzle scroll effect to an image gallery (like we are going to do in this tutorial), can put a refreshing spin on a timeless classic. In this tutorial, we are going to show you how to build a simple layout that reveals an image gallery with a sliding p
Thinking Outside the Box with Divi Box Shadows

by Best Webhosting Added 4 years ago 84 Views / 0 Likes

There are two ways to approach Divi’s built-in settings. The first, and most obvious approach is using the settings within their range while focusing on that particular element on your page. The second approach allows you to look beyond the obvious and use settings in a way you wouldn’t have thought of before. One of those settings involves box shadows. Normally, they’re used to create a certain depth for your elements. Whether you’re adding it to a s
How to Creatively Use Row Box Shadows with Divi

by Best Webhosting Added 4 years ago 84 Views / 0 Likes

One of the most recent Divi updates was long-awaited; the integration of box shadows into sections, rows and modules. In this post, we’ll be focusing on how row box shadows can improve the overall look and feel of your website. To illustrate the depth box shadows can bring to your website, we’ve created an example that we’ll show you how to recreate step by step. Read the article here: https://www.elegantthemes.com/blog/divi-resources/how-to-creativel
Adding Transformed Shadows to Your Copy with Divi

by Best Webhosting Added 4 years ago 88 Views / 0 Likes

With Divi's new transform options, you can create beautiful web design while viewing all transform settings happen in real-time. And by combining different modules with each other, you can achieve some unique and seamless effects that'll help elevate the look and feel of the section you're working on. In this particular post, we'll focus on creating transformed shadows for your copy using Divi's built-in options only. You'll be able to download the ex
How to Add One Sided Box Shadows to Design Elements in Divi

by Best Webhosting Added 4 years ago 77 Views / 0 Likes

Adding one-sided box shadows to various design elements in Divi is a subtle way to add a creative flourish without distracting from the content. In this tutorial, I’m going to show you how to add one-sided box shadows to Divi’s Therapy FAQ Page Layout. As a bonus tip, I’ll also show you how to combine blurb icons as a vertically centered graphic. By learning these Divi design techniques, you can add one-sided box shadows to any modules or columns you
Scroll Image From Top To Bottom - Pure CSS Image Hover Effects Tutorial for Beginners

by Best Webhosting Added 4 years ago 97 Views / 0 Likes

Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: Skylike - Dawn Link: https://youtu.be/Jg9nDEtqWV0