Fullscreen slice hero slider
How do I make an fullscreen slice hero slider?
An experiment for a fullscreen slider for the hero. It's made without canvas, in the old way. The code is not optimized yet, I'll do it in the following future for sure aaaaand it's not completely responsive yet :). What is a fullscreen slice hero slider? How do you make a fullscreen slice hero slider? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.
Fullscreen slice hero slider - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fullscreen slice hero slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- WATCH IT FULLSCREEN PLZ -->
<div class="divider divider--vertical"></div> <div class="divider divider--vertical"></div> <div class="divider divider--vertical"></div> <div class="divider divider--horizzontal"></div> <div class="divider divider--horizzontal"></div> <div class="hero-container"> <div class="cta cta--prev"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path fill="#ffffff" d="M30.55 39.69c.567-.475.645-1.314.17-1.882L20.044 25 30.72 12.19c.474-.566.396-1.408-.17-1.88-.564-.474-1.407-.397-1.88.17L17.28 24.145c-.208.248-.312.552-.312.855s.104.608.31.855L28.67 39.52c.474.566 1.316.642 1.882.17z"/></svg></svg> </div> <div class="cta cta--next"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path fill="#ffffff" d="M19.45 10.31c-.567.475-.644 1.314-.17 1.88L29.956 25 19.28 37.81c-.473.566-.396 1.408.17 1.88s1.408.397 1.88-.17l11.39-13.664c.208-.248.312-.552.312-.855s-.104-.607-.31-.854L21.33 10.48c-.474-.566-1.316-.643-1.882-.17z"/></svg> </div> <div class="cta cta--down"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path fill="#ffffff" d="M40.69 19.87c-.475-.568-1.313-.645-1.88-.172L26 30.374 13.19 19.697c-.565-.472-1.408-.395-1.88.17-.474.567-.397 1.41.17 1.882l13.665 11.386c.248.207.552.312.854.312.303 0 .607-.104.854-.312L40.52 21.75c.567-.474.644-1.315.17-1.88z"/></svg> </div> <div class="text-wrapper"> <div data-slide="0" class="text-container text-container--0 text--active"> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">Life is a <br> wild adventure</div> </div> </div> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">Life is a <br> wild adventure</div> </div> </div> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">Life is a <br> wild adventure</div> </div> </div> <div class="text-label-container"> <div class="text-label">be wild</div> </div> </div> <div data-slide="1" class="text-container text-container--1"> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">I wanna be <br> young forever</div> </div> </div> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">I wanna be <br> young forever</div> </div> </div> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">I wanna be <br> young forever</div> </div> </div> <div class="text-label-container"> <div class="text-label">teenager</div> </div> </div> <div data-slide="2" class="text-container text-container--2"> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">Breathtaking <br> landscapes</div> </div> </div> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">Breathtaking <br> landscapes</div> </div> </div> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">Breathtaking <br> landscapes</div> </div> </div> <div class="text-label-container"> <div class="text-label">panorama</div> </div> </div> <div data-slide="3" class="text-container text-container--3"> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">Feel the power <br> of nature</div> </div> </div> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">Feel the power <br> of nature</div> </div> </div> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">Feel the power <br> of nature</div> </div> </div> <div class="text-label-container"> <div class="text-label">power</div> </div> </div> <div data-slide="4" class="text-container text-container--4"> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">Feel the sense <br> of freedom</div> </div> </div> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">Feel the sense <br> of freedom</div> </div> </div> <div class="text-slice"> <div class="text-main-wrapper"> <div class="text-main-inner">Feel the sense <br> of freedom</div> </div> </div> <div class="text-label-container"> <div class="text-label">infinity</div> </div> </div> </div> <div class="slider-container"> <div> <div class="slider-slice"> <div class="slider-slice-imageContainer image--0 image--active"> <img src="https://i.imgsafe.org/d24eba4717.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--1"> <img src="https://i.imgsafe.org/d24e54bee3.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--2"> <img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--3"> <img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--4"> <img src="https://i.imgsafe.org/d24d4804af.jpg" alt=""> </div> </div> <div class="slider-slice"> <div class="slider-slice-imageContainer image--0 image--active"> <img src="https://i.imgsafe.org/d24eba4717.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--1"> <img src="https://i.imgsafe.org/d24e54bee3.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--2"> <img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--3"> <img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--4"> <img src="https://i.imgsafe.org/d24d4804af.jpg" alt=""> </div> </div> <div class="slider-slice"> <div class="slider-slice-imageContainer image--0 image--active"> <img src="https://i.imgsafe.org/d24eba4717.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--1"> <img src="https://i.imgsafe.org/d24e54bee3.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--2"> <img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--3"> <img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--4"> <img src="https://i.imgsafe.org/d24d4804af.jpg" alt=""> </div> </div> <div class="slider-slice"> <div class="slider-slice-imageContainer image--0 image--active"> <img src="https://i.imgsafe.org/d24eba4717.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--1"> <img src="https://i.imgsafe.org/d24e54bee3.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--2"> <img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--3"> <img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--4"> <img src="https://i.imgsafe.org/d24d4804af.jpg" alt=""> </div> </div> <div class="slider-slice"> <div class="slider-slice-imageContainer image--0 image--active"> <img src="https://i.imgsafe.org/d24eba4717.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--1"> <img src="https://i.imgsafe.org/d24e54bee3.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--2"> <img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--3"> <img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--4"> <img src="https://i.imgsafe.org/d24d4804af.jpg" alt=""> </div> </div> <div class="slider-slice"> <div class="slider-slice-imageContainer image--0 image--active"> <img src="https://i.imgsafe.org/d24eba4717.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--1"> <img src="https://i.imgsafe.org/d24e54bee3.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--2"> <img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--3"> <img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--4"> <img src="https://i.imgsafe.org/d24d4804af.jpg" alt=""> </div> </div> <div class="slider-slice"> <div class="slider-slice-imageContainer image--0 image--active"> <img src="https://i.imgsafe.org/d24eba4717.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--1"> <img src="https://i.imgsafe.org/d24e54bee3.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--2"> <img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--3"> <img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--4"> <img src="https://i.imgsafe.org/d24d4804af.jpg" alt=""> </div> </div> <div class="slider-slice"> <div class="slider-slice-imageContainer image--0 image--active"> <img src="https://i.imgsafe.org/d24eba4717.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--1"> <img src="https://i.imgsafe.org/d24e54bee3.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--2"> <img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--3"> <img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--4"> <img src="https://i.imgsafe.org/d24d4804af.jpg" alt=""> </div> </div> <div class="slider-slice"> <div class="slider-slice-imageContainer image--0 image--active"> <img src="https://i.imgsafe.org/d24eba4717.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--1"> <img src="https://i.imgsafe.org/d24e54bee3.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--2"> <img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--3"> <img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--4"> <img src="https://i.imgsafe.org/d24d4804af.jpg" alt=""> </div> </div> <div class="slider-slice"> <div class="slider-slice-imageContainer image--0 image--active"> <img src="https://i.imgsafe.org/d24eba4717.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--1"> <img src="https://i.imgsafe.org/d24e54bee3.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--2"> <img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--3"> <img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--4"> <img src="https://i.imgsafe.org/d24d4804af.jpg" alt=""> </div> </div> <div class="slider-slice"> <div class="slider-slice-imageContainer image--0 image--active"> <img src="https://i.imgsafe.org/d24eba4717.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--1"> <img src="https://i.imgsafe.org/d24e54bee3.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--2"> <img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--3"> <img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--4"> <img src="https://i.imgsafe.org/d24d4804af.jpg" alt=""> </div> </div> <div class="slider-slice"> <div class="slider-slice-imageContainer image--0 image--active"> <img src="https://i.imgsafe.org/d24eba4717.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--1"> <img src="https://i.imgsafe.org/d24e54bee3.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--2"> <img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--3"> <img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt=""> </div> <div class="slider-slice-imageContainer image--4"> <img src="https://i.imgsafe.org/d24d4804af.jpg" alt=""> </div> </div> </div> <div class="slider-overlay"></div> </div> </div> <!-- CLOSE HEADER--> <section class="page-container"> <article data-article="0"> <h1>Life is a <br> wild adventure</h1> <p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p> <p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p> <h3>Look Into Their Eyes.</h3> <p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p> <p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p> <p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p> <p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p> <p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p> </article> <article data-article="1"> <h1>I wanna be <br> young forever</h1> <p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p> <p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p> <h3>Look Into Their Eyes.</h3> <p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p> <p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p> <p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p> <p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p> <p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p> </article> <article data-article="2"> <h1>Breathtaking <br> landscapes</h1> <p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p> <p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p> <h3>Look Into Their Eyes.</h3> <p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p> <p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p> <p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p> <p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p> <p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p> </article> <article data-article="3"> <h1>Feel the power <br> of nature</h1> <p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p> <p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p> <h3>Look Into Their Eyes.</h3> <p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p> <p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p> <p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p> <p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p> <p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p> </article> <article data-article="4"> <h1>Feel the sense <br> of freedom</h1> <p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p> <p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p> <h3>Look Into Their Eyes.</h3> <p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p> <p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p> <p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p> <p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p> <p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p> </article> </section> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Fullscreen slice hero slider - Script Codes CSS Codes
@import "https://fonts.googleapis.com/css?family=Biryani:400,900";
body { margin: 0; padding: 0; color: #424242; font-family: 'Georgia', serif; font-size: 21px; line-height: 34px;
}
body.u-blockScroll { height: 100%; overflow: hidden;
}
h1 { font-family: 'Biryani', sans-serif; text-align: center; font-size: 80px; line-height: 73px; text-align: left; font-weight: 700; opacity: 1; margin-bottom: 30px;
}
h3 { font-family: 'Biryani', sans-serif; opacity: 0.4; font-weight: 400; margin-top: 40px; margin-bottom: 5px; font-size: 32px;
}
p { margin-top: 0; margin-bottom: 29px;
}
.hero-container { position: fixed; width: 100%; height: 100%; top: 0; z-index: 100;
}
.divider { position: fixed; display: inline-block; background: rgba(130, 130, 130, 0.12); z-index: 200;
}
.divider--vertical:nth-of-type(1) { left: 25%; width: 2px; top: 0; height: 100%;
}
.divider--vertical:nth-of-type(2) { left: 50%; width: 2px; top: 0; height: 100%;
}
.divider--vertical:nth-of-type(3) { left: 75%; width: 2px; top: 0; height: 100%;
}
.divider--horizzontal:nth-of-type(4) { top: 33vh; width: 100%; height: 2px;
}
.divider--horizzontal:nth-of-type(5) { top: 66vh; width: 100%; height: 2px;
}
.text-container { position: absolute;
}
.text-wrapper { position: absolute; z-index: 10; left: 10%; bottom: 40%; font-family: 'Biryani', sans-serif; color: white;
}
.text-slice { width: 33.33%; white-space: nowrap; overflow: hidden; float: left; padding: 20px 0px;
}
.text-slice:nth-of-type(2) .text-main-inner { -webkit-transform: translateX(-100%); transform: translateX(-100%);
}
.text-slice:nth-of-type(3) .text-main-inner { -webkit-transform: translateX(-200%); transform: translateX(-200%);
}
.text-main-wrapper { padding-top: 40px; font-size: 120px; line-height: 110px; font-weight: 900; text-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5); overflow: hidden;
}
@media screen and (max-width: 1000px) { .text-main-wrapper { font-size: 80px; line-height: 85px; }
}
.text-label-container { position: absolute; display: inline-block; overflow: hidden; width: 0px; height: 35px; left: -10px; top: 100px; -webkit-transition: all 1s 0s; transition: all 1s 0s;
}
.text-label { display: inline-block; position: absolute; height: 25px; padding: 0px 10px; line-height: 28px; font-weight: 400; font-size: 10px; letter-spacing: 5px; text-transform: uppercase; font-weight: 900;
}
.text-label:before { content: ""; position: absolute; width: 0px; height: 0px; border-top: 0px solid transparent; border-bottom: 5px solid transparent; -webkit-transform: rotate(-71deg); transform: rotate(-71deg); -webkit-transform-origin: top left; transform-origin: top left; left: 0; top: 25px; z-index: -1; -webkit-transition: all 0.4s 0s; transition: all 0.4s 0s;
}
.text--active .text-label-container { width: 200px; -webkit-transition-delay: 1s; transition-delay: 1s;
}
.text--active .text-label:before { border-top: 25px solid transparent; -webkit-transition-delay: 1.2s; transition-delay: 1.2s;
}
.text-container--0 .text-label { background: #169216;
}
.text-container--0 .text-label:before { border-left: 13px solid #093909;
}
.text-container--1 .text-label { background: #C9567D;
}
.text-container--1 .text-label:before { border-left: 13px solid #8c2d4d;
}
.text-container--2 .text-label { background: #24c7c0;
}
.text-container--2 .text-label:before { border-left: 13px solid #14716d;
}
.text-container--3 .text-label { background: #6593d6;
}
.text-container--3 .text-label:before { border-left: 13px solid #2d5fa8;
}
.text-container--4 .text-label { background: #1fbeca;
}
.text-container--4 .text-label:before { border-left: 13px solid #116b72;
}
.slider-container { position: relative; overflow: hidden;
}
.slider-container:after { content: ""; display: table; clear: both;
}
.slider-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #0a0a0a; opacity: 0.2;
}
.slider-slice { position: relative; width: 25%; height: 33.33vh; float: left; overflow: hidden; -ms-box-sizing: border-box; box-sizing: border-box;
}
.slider-slice img { position: relative;
}
.slider-slice-imageContainer { height: 100%; width: 100%; overflow: hidden; position: absolute;
}
.slider-slice:nth-of-type(1) img { top: 0; left: 0;
}
.slider-slice:nth-of-type(2) img { top: 0; left: -25vw;
}
.slider-slice:nth-of-type(3) img { top: 0; left: -50vw;
}
.slider-slice:nth-of-type(4) img { top: 0; left: -75vw;
}
.slider-slice:nth-of-type(5) img { top: -33.33vh; left: 0;
}
.slider-slice:nth-of-type(6) img { top: -33.33vh; left: -25vw;
}
.slider-slice:nth-of-type(7) img { top: -33.33vh; left: -50vw;
}
.slider-slice:nth-of-type(8) img { top: -33.33vh; left: -75vw;
}
.slider-slice:nth-of-type(9) img { top: -66.66vh; left: 0;
}
.slider-slice:nth-of-type(10) img { top: -66.66vh; left: -25vw;
}
.slider-slice:nth-of-type(11) img { top: -66.66vh; left: -50vw;
}
.slider-slice:nth-of-type(12) img { top: -66.66vh; left: -75vw;
}
.cta { position: fixed; width: 50px; height: 50px; border-radius: 50%; z-index: 100; overflow: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); border: solid 2px white; opacity: 0.5; -webkit-transition: all 0.2s; transition: all 0.2s; background: rgba(120, 160, 170, 0.4); cursor: pointer;
}
.cta svg { z-index: 101; position: absolute; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; opacity: .3;
}
.cta:hover { opacity: 1;
}
.cta:hover svg { opacity: 1;
}
.cta--next { right: 20px; top: 50%;
}
.cta--next:hover svg { -webkit-transform: translateX(4%); transform: translateX(4%);
}
.cta--prev { left: 20px; top: 50%;
}
.cta--prev:hover svg { -webkit-transform: translateX(-4%); transform: translateX(-4%);
}
.cta--down { bottom: 20px; left: 50%; margin-left: -25px;
}
.cta--down:hover svg { -webkit-transform: translateY(4%); transform: translateY(4%);
}
.page-container { position: relative; max-width: 700px; width: 90%; margin: 150px auto 0 auto;
}
Fullscreen slice hero slider - Script Codes JS Codes
(function($){ var image = $(".slider-slice img"), imageContainer = $(".slider-slice-imageContainer"), sliderSlice = $(".slider-slice"), imageActive = $(".image--active"), textActive = $(".text--active .text-main-wrapper"), textSlice = textActive.find(".text-main-wrapper"), labelContainer = $(".text-label-container"), sliderOverlay = $(".slider-overlay"), CTA = $(".cta"), articleTitle = $("article h1"), articlePara = $("article p"), articleSubTitle = $("article h3"), activeLabel = $(".text--active .text-label"), vw, vh, delay = 0.06, delays = []; TweenMax.set(imageContainer, {xPercent: "100"}); TweenMax.set(imageActive, {xPercent: "0"}); TweenMax.set($(".text-container:not(.text--active) .text-main-wrapper"), {xPercent: 100}); TweenMax.set(articleTitle, {autoAlpha:0, display:'none'}); TweenMax.set(articlePara, {autoAlpha:0, display:'none'}); TweenMax.set(articleSubTitle, {autoAlpha:0, display:'none'}); $("body").addClass("u-blockScroll"); for (var i = 0; i < 4; i++) { delays.push(i*delay); }; /******************************** FIT THE WINDOWS WITH THE IMAGES ********************************/ function positionImages(){ vw = $(window).width(); vh = $(window).height(); var imageW = image.width(); var imageH = image.height(); ratioImg = imageW / imageH; ratioW = vw / vh; if(ratioImg > ratioW){ image.css({"width": "auto", "height" : vh}); }else{ image.css({"width": vw, "height" : "auto"}); } } positionImages(); $(window).on("resize", positionImages); /******************************** OPENING ********************************/ var tlOpening = new TimelineMax({delay: 2}); var delayOpening = 0.05; tlOpening .fromTo(($(".slider-slice-imageContainer.image--active").eq(0)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 1 * delayOpening) .fromTo(($(".slider-slice-imageContainer.image--active").eq(1)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 2 * delayOpening) .fromTo(($(".slider-slice-imageContainer.image--active").eq(2)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 3 * delayOpening) .fromTo(($(".slider-slice-imageContainer.image--active").eq(3)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 4 * delayOpening) .fromTo(($(".slider-slice-imageContainer.image--active").eq(4)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 2 * delayOpening) .fromTo(($(".slider-slice-imageContainer.image--active").eq(5)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 3 * delayOpening) .fromTo(($(".slider-slice-imageContainer.image--active").eq(6)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 5 * delayOpening) .fromTo(($(".slider-slice-imageContainer.image--active").eq(7)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 5 * delayOpening) .fromTo(($(".slider-slice-imageContainer.image--active").eq(8)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 3 * delayOpening) .fromTo(($(".slider-slice-imageContainer.image--active").eq(9)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 4 * delayOpening) .fromTo(($(".slider-slice-imageContainer.image--active").eq(10)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 5 * delayOpening) .fromTo(($(".slider-slice-imageContainer.image--active").eq(11)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 6 * delayOpening) .staggerFromTo(($(".text-container.text--active .text-main-wrapper")), 1, {xPercent: -100}, {xPercent: 0, ease: Power2.easeInOut}, 0.2, "-=1") .fromTo(activeLabel, 1, {autoAlpha:0}, {autoAlpha: 1}) .fromTo(CTA, 0.6, {autoAlpha:0}, {autoAlpha:1}); /******************************** SLIDE BACKGROUND & TEXT SLIDE ********************************/ var durationSlide = 0.8; var durationText = 0.8; var isMoving = false; function slideBackground(fromRight){ isMoving = true; var tlSlideBackground = new TimelineMax({onComplete: function(){ isMoving = false}}); var tlSlideText = new TimelineMax(); imageActive = $(".image--active"); if(fromRight === true){ var from = 105; var to = -100; }else{ var from = -105; var to = 100; } var k = 0; imageActive.each(function(i,el){ var parent = $(el).closest(".slider-slice"); if(fromRight === true){ var nextSlice = $(el).next(); }else{ var nextSlice = $(el).prev(); } if (nextSlice.is(':last-child') || nextSlice.is(':first-child')) { parent.find(".slider-slice-imageContainer").eq(0).appendTo(parent); } if(nextSlice.index() == -1){ parent.find(".slider-slice-imageContainer").eq(0).appendTo(parent); var nextSlice = $(el).prev(); } tlSlideBackground .to(el, (durationSlide * 1.1), {xPercent: to, ease: Power2.easeInOut}, delays[k]) .fromTo(nextSlice, durationSlide, {xPercent: from}, {xPercent:0, ease: Power2.easeInOut}, delays[k]) $(el).removeClass("image--active"); nextSlice.addClass("image--active"); k++; if(k==4){ k=0; } }); // SLIDE TEXT k= 0; textActive.each(function(i, el){ var parent = $(el).closest(".text-container"); if(fromRight === true){ var nextText = parent.next().find(".text-main-wrapper"); }else{ var nextText = parent.prev().find(".text-main-wrapper"); } if (nextText.closest(".text-container").is(':last-child') || nextText.closest(".text-container").is(':first-child')) { console.log("yo, ultimi"); $(".text-wrapper .text-container:first-child").appendTo(parent.closest(".text-wrapper")); } if(nextText.index() == -1){ parent.eq(0).appendTo(parent.closest(".text-wrapper")); var nextText = parent.prev().find(".text-main-wrapper"); } tlSlideText .to(el, durationText, {xPercent: to, ease: Power2.easeInOut}, (delays[k])*1.2) .fromTo(nextText, durationText, {xPercent: from}, {xPercent:0, ease: Power2.easeInOut}, (delays[k])*1.2) parent.removeClass("text--active"); nextText.closest(".text-container").addClass("text--active"); k++; if(k==4){ k=0; } console.log(parent.first()); }); imageActive = $(".image--active"); textActive = $(".text--active .text-main-wrapper"); } /******************************** CTA ACTIONS ********************************/ $(".cta--next").click(function(){ var fromRight = true; if(!(isMoving)){ slideBackground(fromRight); } }); $(".cta--prev").click(function(){ var fromRight = false; if(!(isMoving)){ slideBackground(fromRight); } }); $(".cta--down").click(function(){ activeLabel = $(".text--active .text-label"); activeSlide = $(".text--active").attr("data-slide"); var article = $("[data-article="+ activeSlide + "]article"); var articleTitle = $("[data-article="+ activeSlide + "]article h1"); var articlePara = $("[data-article="+ activeSlide + "]article p"); var articleSubTitle = $("[data-article="+ activeSlide + "]article h3"); var tlSlideUp = new TimelineMax(), tlSlideTextUp = new TimelineMax(), tlArticleShow = new TimelineMax(), tlMainSlideUp = new TimelineMax({ onComplete: function(){TweenMax.set($(".hero-container"), {autoAlpha:0}) }}); tlArticleShow .fromTo(articleTitle, 2, {y:50, autoAlpha:0},{y:0,autoAlpha:1, ease:Power4.easeOut, display:'block'}, "sliderOut-=0.5") article.children(":not(h1)").each(function(i,el){ tlArticleShow .fromTo(el, 2.2, {y:20, autoAlpha:0},{y:0,autoAlpha:1, ease:Power4.easeOut, display:'block'}, ((i * 0.2)+0.6)) }); imageActive.each(function(i,el){ k = 0; tlSlideUp .to(el, 0.8, {yPercent: -101, ease: Power2.easeInOut}, delays[k]) k++; if(k==4){ k=0; } }); textActive.each(function(i, el){ tlSlideTextUp .to(el, 0.8, {yPercent: -110, ease: Power2.easeInOut}, delays[k]) }); tlMainSlideUp .to(CTA, 0.2, {autoAlpha: 0}) .add(tlSlideUp) .add(tlSlideTextUp, '0.2') .to(activeLabel, 0.8, {top: -40, ease: Power2.easeInOut}, "-=0.8") .to(sliderOverlay, 0.2, {autoAlpha: 0, onComplete: function(){ $("body").removeClass("u-blockScroll")}}, "-=0.5") .add("sliderOut") .add(tlArticleShow); tlMainSlideUp.play(); });
})(jQuery);
Developer | Robert Borghesi |
Username | dghez |
Uploaded | August 27, 2022 |
Rating | 4.5 |
Size | 9,370 Kb |
Views | 36,432 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Anaglyph 3D with CSS-blend on mouseMove | 2,982 Kb |
Text-mask background moving on MouseMove - v2 | 3,050 Kb |
Simple PureCss dropdown menu with following subnav | 2,966 Kb |
Best 3 players on fifa 14 - HOVER THEM | 3,546 Kb |
Sorting with morphing content | 2,387 Kb |
Pure custom css animation on new google logo | 3,362 Kb |
Animated title moving on scroll | 6,002 Kb |
Gradient border on hover - Scorer of fifa world cup | 3,598 Kb |
SlamDunk Parallax on MouseMove | 2,512 Kb |
Opening with auto typing responsive sentences with random background color loop | 5,435 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Css3 only dropdown menu | Riogrande | 2,519 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Next Word Predictor | Rfalor | 2,776 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
CSS Social Media Icon | TychoBlender | 3,871 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!