A Pen by Timothy Long on CodePen.
Zylla Polarhardboiled
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="demo-btns"> | |
| <header> | |
| <h1>Material Design Modals</h1> | |
| </header> | |
| <div class="info"> | |
| <div class="buttons"> | |
| <p> | |
| <a href="" data-modal="#modal" class="modal__trigger">Modal 1</a> | |
| <a href="" data-modal="#modal2" class="modal__trigger">Modal 2</a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="demo-btns"> | |
| <header> | |
| <h1>Material Design Modals</h1> | |
| </header> | |
| <div class="info"> | |
| <div class="buttons"> | |
| <p> | |
| <a href="" data-modal="#modal" class="modal__trigger">Modal 1</a> | |
| <a href="" data-modal="#modal2" class="modal__trigger">Modal 2</a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container | |
| .play-button | |
| .arrow.arrow-left | |
| .arrow.arrow-right |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h4 class="text-center">Enable throttling in your dev tools to better see the effect</h4> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <div class="progressive-image"> | |
| <div class="loadingImage" | |
| style="background: url('https://res.cloudinary.com/sourcetoad/image/upload/v1483582294/frog-sm_sg9llg.jpg')" | |
| data-image="https://res.cloudinary.com/sourcetoad/image/upload/v1483582295/frog-lg_ikekce.jpg"> | |
| </div> | |
| <div class="overlay"></div> |
Polarhardboiled
/ how-to-build-a-simple-full-screen-slideshow-with-vanilla-javascript.markdown
Created
March 14, 2021 12:20
How to Build a Simple Full-Screen Slideshow With Vanilla JavaScript
In this tutorial you’ll learn how to create a responsive full-screen slideshow with plain JavaScript. To build it, we’ll go through several different front-end tricks.
Tutorial available from March 17th 2020.
A Pen by Envato Tuts+ on CodePen.
Designed by Upperquad [https://upperquad.com] developed by Aranja [https://aranja.com] for Facebook. See it live on https://nonprofits.fb.com/learn-the-basics/
A Pen by David Bachmann Johannesson on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .goldrush | |
| - for (i = 0; i < 200; i++) | |
| .gold | |
| .rotate | |
| .graphic |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .goldrush | |
| - for (i = 0; i < 200; i++) | |
| .gold | |
| .rotate | |
| .graphic |
NewerOlder