Image Galleries & Animations — Original guides

Wappler documentation

Image Galleries & Animations — Original guides

Illustrated image galleries & animations guides, with the original steps and examples preserved.

Open in Wappler

Choose a guide. Version notes identify original instructions that use an earlier interface or framework.

Guides (17)

Adding Background VideosYou can easily add a responsive background video to a section/container of your page. It will auto scale to fill the available space and looks nice on any device. First, select the container you want View guide→Adding Transitions to page elementsAbout Transitions Transitions are used to create a smooth animation between different states of an element. You can customize the duration, delay and the easing for your transitions. In this tutorial View guide→Adding Typing AnimationYou can add an animated typing effect to your pages, using the Typed Component in Wappler. It can be added as a prefix or suffix in your headings, links or paragraphs. We are going to add it as a suffView guide→Animation Delay OptionsYou can create sequential animations using the delay option of the Animate component in Wappler. We added 3 images in a row on our page and we want to animate them sequentially when they enter the vieView guide→Applying a Masonry GridYou know it can be a real problem to create a layout based on columns when you are using elements with different heights in each row. You can see that the elements are not properly aligned. This is whView guide→Applying a Page PreloaderYou can add a preloader to your page while the page content is still loading. It can be used on both static sites and sites using dynamic data. For example it is really useful for large data sets: In View guide→Applying Parallax Effect to ImagesYou can apply a parallax effect to the images on your page. The parallax effect applied to each of your images can be different and there are 8 different effects you can choose from. Select your imageView guide→Lazy Load with Dynamic DataYou can use the Lazy Load Component with dynamic data. We have a dynamic masonry layout on our page, created from a database query. You can use any dynamic source of course - database, API data sourceView guide→Responsive Fullscreen SwiperIn this tutorial we will show you how to create a fullscreen Swiper, similar to the one we created in THIS SHOWCASE. This will require us to add 4 lines of CSS through the Styles panel, but everythingView guide→Responsive SlideshowWe included App Connect and Bootstrap 4 on our page. Then we created a really simple page layout and we are going to insert it inside a Bootstrap 4 column. The App Connect Slideshow is a responsive slView guide→Slideshow TransitionsApp Connect Slideshow includes two sets of transitions, which can be applied to your images - 2D transitions and 3D transitions. they can be applied to the whole slideshow or you can set specific tranView guide→Swiper - Basic OptionsThe Swiper component in Wappler is a modern, touch-friendly slider which can be used with any content. It includes different options like 2D and 3D transitions, parallax effects, touch interactions, dView guide→Swiper - Responsive OptionsYou can customize the Swiper component to show different number of slides on different screen sizes. Also you can customize the spacing between slides. We added a Swiper with slides containing images View guide→Using AnimationsWith Wappler you can apply different animation effects to any of the elements on the page. There are two types of anymations included - inview (or onscroll) animations, and enter/leave animations. TheView guide→Using Lazy Load for Image on Your PageLazy Load Component offers the so called "lazy loading" for the images on your page. This means, that when your page contains many images, you don't have to wait for the page load them initially. The View guide→Using Placeholder Image with Lazy LoadIn some cases, where your images are huge in size it can be useful to use an image placeholder, while the original image is loading. In this tutorial we will show you how to use a low-quality version View guide→Using the Lightbox ComponentIntro The Lightbox component allows you to display images or a collection of images or videos in a simple and elegant pop-up window. Lightbox Options In order to setup the Lightbox component options, View guide→