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 |
Best 3 players on fifa 14 - HOVER THEM | 3,546 Kb |
Pulse Avatar on click with TweenMax | 4,116 Kb |
Continuous register clean form with autoresize input | 3,549 Kb |
Fullscreen slice hero slider | 9,370 Kb |
Envato Remix Contest Challenge | 5,017 Kb |
Opening with auto typing responsive sentences with random background color loop | 5,435 Kb |
Sorting with morphing content | 2,387 Kb |
Animated title moving on scroll | 6,002 Kb |
Pure Css Loader - Square | 2,498 Kb |
Enel brand - logo animation with tweenmax | 127,271 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 |
Map Controls | Iliadraznin | 3,721 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Vue.js | Thommyboy02 | 1,506 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 Kb |
Calculator | Rzencoder | 4,572 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
Gradients | Karpovsystems | 2,394 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 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!