Slider Slide is not repeating.
I'm trying to do that. The slider works fine, but when the last slide comes there's an end, no repeat.
And here's my code in a snippet (the snippet's window may be too little, so take a look here: https://codepen.io/km_likhon/pen/eEroNK):
var Slider = (function() {
var initSlider = function() {
var dir = $("html").attr("dir");
var swipeHandler = new Hammer(document.getElementById("slider"));
swipeHandler.on('swipeleft', function(e) {
if (dir == "rtl")
$(".arrow-left").trigger("click");
else
$(".arrow-right").trigger("click");
});
swipeHandler.on('swiperight', function(e) {
if (dir == "rtl")
$(".arrow-right").trigger("click");
else
$(".arrow-left").trigger("click");
});
$(".arrow-right , .arrow-left").click(function(event) {
var nextActiveSlide = $(".slide.active").next();
if ($(this).hasClass("arrow-left"))
nextActiveSlide = $(".slide.active").prev();
if (nextActiveSlide.length > 0) {
var nextActiveIndex = nextActiveSlide.index();
$(".dots span").removeClass("active");
$($(".dots").children()[nextActiveIndex]).addClass("active");
updateSlides(nextActiveSlide);
}
});
$(".dots span").click(function(event) {
var slideIndex = $(this).index();
var nextActiveSlide = $($(".slider").children()[slideIndex]);
$(".dots span").removeClass("active");
$(this).addClass("active");
updateSlides(nextActiveSlide);
});
var updateSlides = function(nextActiveSlide) {
var nextActiveSlideIndex = $(nextActiveSlide).index();
$(".slide").removeClass("prev-1");
$(".slide").removeClass("next-1");
$(".slide").removeClass("active");
$(".slide").removeClass("prev-2");
$(".slide").removeClass("next-2");
nextActiveSlide.addClass("active");
nextActiveSlide.prev().addClass("prev-1");
nextActiveSlide.prev().prev().addClass("prev-2");
nextActiveSlide.addClass("active");
nextActiveSlide.next().addClass("next-1");
nextActiveSlide.next().next().addClass("next-2");
}
var updateToNextSlide = function(nextActiveSlide)
{
}
}
return {
init: function() {
initSlider();
}
}
})();
$(function() {
Slider.init();
});
.slider-container {
display: block;
height: 270px;
width: auto;
margin: 0 auto;
position: relative;
max-width: 1300px;
margin-top: 20px;
}
.slider-container .arrow-left {
position: absolute;
left: 10%;
top: 50%;
transform: translate3d(0, -50%, 0);
color: white;
font-size: 28px;
cursor: pointer;
z-index: 9;
border-top: 15px solid transparent;
border-right: 30px solid #C85054;
border-bottom: 15px solid transparent;
}
#media (max-width: 768px) {
.slider-container .arrow-left {
display: none;
}
}
.slider-container .arrow-right {
position: absolute;
right: 10%;
top: 50%;
transform: translate3d(0, -50%, 0);
color: white;
font-size: 28px;
cursor: pointer;
z-index: 9;
border-top: 15px solid transparent;
border-left: 30px solid #C85054;
border-bottom: 15px solid transparent;
}
#media (max-width: 768px) {
.slider-container .arrow-right {
display: none;
}
}
.slider-container .dots {
display: inline-block;
width: 100%;
text-align: center;
margin: 30px 0;
user-select: none;
}
.slider-container .dots span {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 2px;
cursor: pointer;
user-select: none;
padding: 10px 0;
position: relative;
}
.slider-container .dots span:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #ccc;
opacity: 0.6;
}
#media (max-width: 768px) {
.slider-container .dots span {
width: 23px;
margin-bottom: 15px;
}
}
.slider-container .dots span.active:before {
background-color: #C85054;
opacity: 1;
}
.slider-container .slider {
display: block;
width: 650px;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
line-height: 270px;
color: white;
}
#media (max-width: 768px) {
.slider-container .slider {
height: 450px;
}
}
.slider-container .slider .slide {
display: inline-block;
width: 80%;
height: 270px;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0) scale3d(0.4, 0.4, 1);
transition: transform 0.3s ease-in-out 0s, z-index .2s ease-in-out .1s;
background-color: #2C2A40;
}
.slider-container .slider .slide:nth-child(odd) {
background-color: gray;
}
#media (max-width: 768px) {
.slider-container .slider .slide {
width: 100%;
height: 450px;
}
}
.slider-container .slider .slide:nth-child(1) {
background-color: #505E63;
}
.slider-container .slider .slide:nth-child(2) {
background-color: #62698C;
}
.slider-container .slider .slide:nth-child(3) {
background-color: #2C2A40;
}
.slider-container .slider .slide:nth-child(4) {
background-color: #C85054;
}
.slider-container .slider .slide:nth-child(5) {
background-color: #F1BB70;
}
.slider-container .slider .slide.prev-2 {
transform: translate3d(-105%, -50%, 0) scale3d(0.4, 0.4, 1);
z-index: 1;
opacity: 0.5;
}
.slider-container .slider .slide.prev-1 {
transform: translate3d(-85%, -50%, 0) scale3d(0.6, 0.6, 1);
z-index: 2;
}
.slider-container .slider .slide.next-1 {
z-index: 2;
transform: translate3d(-15%, -50%, 0) scale3d(0.6, 0.6, 1);
}
.slider-container .slider .slide.next-2 {
z-index: 1;
transform: translate3d(5%, -50%, 0) scale3d(0.4, 0.4, 1);
opacity: 0.5;
}
.slider-container .slider .slide.active {
z-index: 3;
transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.3);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<div class="slider-container">
<span class="arrow-left"></span>
<span class="arrow-right"></span>
<div class="slider" id="slider">
<div class="slide prev-2">
1
</div>
<div class="slide prev-1">
2
</div>
<div class="slide active">
3
</div>
<div class="slide next-1">
4
</div>
<div class="slide next-2">
5
</div>
<div class="slide">
6
</div>
<div class="slide">
7
</div>
<div class="slide">
8
</div>
</div>
<div class="dots">
<span></span>
<span></span>
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
Please help me fix this. Thanks.
Related
It is getting the class i assigned but why it is not transforming to 45deg rotate. I couldn't figure out as i tried for almost 15 mins.please check and let me know. So i thought to post it here. Let me know if you can crack it.https://codepen.io/TA0011/pen/ExLyLNe check the link and let me know about the concern.
const sidebar = document.querySelector('#mySidebar')
const toggle = document.querySelector('#sidebar-toggle')
toggle.addEventListener('click', toggleSidebar)
function toggleSidebar(e) {
toggle.classList.toggle('open')
sidebar.classList.toggle('open');
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
header{
padding: 0 20px;
height: 40px;
width:100%;
background: coral;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
display: flex;
justify-content: space-between;
z-index: 1001;
}
header img{
width:40px;
height:40px;
}
#sidebar-toggle{
margin: 0;
cursor: grab;
background: rgba(0, 136, 169, 1);
border-radius: 50%;
width: 40px;
height: 40px;
position:relative;
}
#sidebar-toggle div{
width: 20px;
height:2px;
top: 8px;
background-color: #fff;
margin: 5px 0;
position: relative;
transition: all 0.3s ease 0s;
transform: translate(50%,-50%);
}
.open.bar4 {
-webkit-transform: rotate(-45deg) translate(-6px, 6px);
transform: rotate(-45deg) translate(-4.5px, 5.5px);
moz-transform: rotate(-45deg) translate(-4.5px, 5.5px);
}
.open .bar5 {
opacity: 0;
}
.open .bar6 {
-webkit-transform: rotate(45deg) translate(-5.5px, -5.5px);
transform: rotate(45deg) translate(-5.5px, -5.5px);
moz-transform: rotate(45deg) translate(-5.5px, -5.5px);
}
.sidebar-header img{
width:30px;
}
.sidebar {
display:none;
position: fixed;
height: 100vh;
top: 40px;
left: 0;
background-color: #fff;
width: 15.625rem;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
}
.open.sidebar {
display: flex;
}
.sidebar-header {
display: flex;
padding: 5px;
}
.sidebar-header img {
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
border-radius: 50%;
width: 41px;
float: none;
display: block;
object-fit: fill;
height: 40px;
}
.sidebar-header h6 {
display: flex;
justify-content: flex-end;
}
<header>
<img src="https://cdn.dribbble.com/userupload/3158902/file/original-7c71bfa677e61dea61bc2acd59158d32.jpg?resize=400x0">
<div id="sidebar-toggle">
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
</header>
<div class="sidebar" id='mySidebar'>
<div class="sidebar-container">
<div class="sidebar-header">
<img src="https://i.pinimg.com/736x/0d/cf/b5/0dcfb548989afdf22afff75e2a46a508.jpg">
<h6>Umann goswami</h6>
</div>
</div>
</div>
<div id="main">
Welcome human
</div>
An ID selector # has the highest specificity. That means that the .open class will be overwritten by the css of #sidebar-toggle.
You can fix this by preceding your CSS selectors with the ID selector.
#sidebar-toggle.open .bar4 {}
#sidebar-toggle.open .bar5 {}
#sidebar-toggle.open .bar6 {}
Also you're missing a space between .open.bar4
const sidebar = document.querySelector('#mySidebar')
const toggle = document.querySelector('#sidebar-toggle')
toggle.addEventListener('click', toggleSidebar)
function toggleSidebar(e) {
toggle.classList.toggle('open')
sidebar.classList.toggle('open');
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
header{
padding: 0 20px;
height: 40px;
width:100%;
background: coral;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
display: flex;
justify-content: space-between;
z-index: 1001;
}
header img{
width:40px;
height:40px;
}
#sidebar-toggle{
margin: 0;
cursor: grab;
background: rgba(0, 136, 169, 1);
border-radius: 50%;
width: 40px;
height: 40px;
position:relative;
}
#sidebar-toggle div{
width: 20px;
height:2px;
top: 8px;
background-color: #fff;
margin: 5px 0;
position: relative;
transition: all 0.3s ease 0s;
transform: translate(50%,-50%);
}
#sidebar-toggle.open .bar4 {
-webkit-transform: rotate(-45deg) translate(-6px, 6px);
transform: rotate(-45deg) translate(-4.5px, 5.5px);
moz-transform: rotate(-45deg) translate(-4.5px, 5.5px);
}
#sidebar-toggle.open .bar5 {
opacity: 0;
}
#sidebar-toggle.open .bar6 {
-webkit-transform: rotate(45deg) translate(-5.5px, -5.5px);
transform: rotate(45deg) translate(-5.5px, -5.5px);
moz-transform: rotate(45deg) translate(-5.5px, -5.5px);
}
.sidebar-header img{
width:30px;
}
.sidebar {
display:none;
position: fixed;
height: 100vh;
top: 40px;
left: 0;
background-color: #fff;
width: 15.625rem;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
}
.open.sidebar {
display: flex;
}
.sidebar-header {
display: flex;
padding: 5px;
}
.sidebar-header img {
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
border-radius: 50%;
width: 41px;
float: none;
display: block;
object-fit: fill;
height: 40px;
}
.sidebar-header h6 {
display: flex;
justify-content: flex-end;
}
<header>
<img src="https://cdn.dribbble.com/userupload/3158902/file/original-7c71bfa677e61dea61bc2acd59158d32.jpg?resize=400x0">
<div id="sidebar-toggle">
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
</header>
<div class="sidebar" id='mySidebar'>
<div class="sidebar-container">
<div class="sidebar-header">
<img src="https://i.pinimg.com/736x/0d/cf/b5/0dcfb548989afdf22afff75e2a46a508.jpg">
<h6>Umann goswami</h6>
</div>
</div>
</div>
<div id="main">
Welcome human
</div>
Example positioning with CSS Grid
So here we create a grid where there is a single column with a fixed width of 20px. The amount of rows are generated dynamically based on the amount of children. Each row has a height 2px. The space (gap) between each row is 5px. All rows and columns are then position in the center of the #sidebar-toggle element.
const sidebarToggle = document.querySelector('#sidebar-toggle');
setInterval(() => {
sidebarToggle.classList.toggle('open');
}, 2000);
#sidebar-toggle {
display: grid;
grid-auto-rows: 2px;
grid-template-columns: 20px;
gap: 5px;
place-content: center;
cursor: pointer;
background: rgba(0, 136, 169, 1);
border-radius: 50%;
width: 40px;
height: 40px;
margin: 0;
}
#sidebar-toggle div {
background-color: #fff;
position: relative;
transition: all 0.3s ease 0s;
}
#sidebar-toggle.open .bar4 {
transform: translate3d(0, 7px, 0) rotate(-45deg);
}
#sidebar-toggle.open .bar5 {
opacity: 0;
}
#sidebar-toggle.open .bar6 {
transform: translate3d(0, -7px, 0) rotate(45deg);
}
<div id="sidebar-toggle">
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
I made a website, which is mobile responsive with a sticky header. But on Iphones the hamburger button is not in the right place, and also doesn't move with the sticky header perfectly. I don't know it is because of the Safari, however, I did not meet with this problem on other tools, only on iPhones. If I change the place of the Hamburger button in one place it won't look good on another phone.
I don't use Bootstrap.
My question is, how could I make my hamburger button to look good on every mobile?
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: 20%;
transform: translate(-5%, -280%); /*this was 200 with absolute*/
z-index: 2;
}
.nav-links
{ margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
transform: translate(0%, -285%); /*this was 200 with absolute*/
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
transform: translate(0%, -330%);
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
transform: translate(0%, -300%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
transform: translate(0%, -320%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
transform: translate(0%, -270%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
transform: translate(0%, -245%); /*this was 200 with absolute*/
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="./img/logo.png" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
First Method
add align-items: center; to nav tag. that is
nav{align-items: center;}
Also remove top:20%; in hamburger class. That is
.hamburger{top:20%}
position:fixed element having atleast assign one of the top, left, bottom, right.
So, here right:5% is only enough.
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
align-items: center;
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>
Second Method
We can align Hamburger icon to center by without translate
instead of adding
top:20%;
to calculated by
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
--clr-accent:#111;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
height: 20vh;
margin: auto;
align-items: center;
border-bottom: 1px solid var(--clr-accent);
}
.logo-container,
.nav-links {
display: flex;
}
.logo-container {
flex: 1;
position: relative;
left: 5%;
}
.logo {
font-weight: 400;
margin: 5px;
}
#myLogo{
max-width: 120px;
max-height: 120px;
}
.logo-container img{
max-width: 120px;
max-height: 120px;
}
/* Logo container JS*/
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
nav {
flex: 2;
display: flex; /* Make nav a flexbox container , also this makes a new problem*/
}
.nav-links {
margin-left:15%;
margin-right: 15%;
justify-content: center;
justify-content: space-between;
list-style: none;
flex: 1; /* Let it occupy rest of the container */
align-items: center; /* Align to the vertical center because logo is bigger. */
}
.nav-link {
color: var(--clr-dark);
font-size:20px;
text-decoration: none;
font-weight: 600;
}
.sticky {
position: fixed;
top: 10px;
height: 20vh;
width:100%;
align-items: center;
background: rgba(255, 255, 255, 1);
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 767px){
/* Logo container JS*/
.logo-container { display: 'block' }
.line{
width: 30px;
height: 3px;
background: var(--clr-accent);
margin: 5px;
}
header{
background: white;
}
nav{
position: relative;
}
.hamburger{
position: fixed; /*this was absolute*/
cursor: pointer;
right: 5%;
top: calc((20vh - 30px) / 2); // header height = 20vh and hamburger height = 30px makes half of both to align middle of header
z-index: 2;
}
.nav-links
{
margin-left:0%;
margin-right: 0%;
justify-content: space-evenly;
background-color: var(--clr-light);
position: fixed;
height: 100vh;
width:100%;
flex-direction: column;
clip-path: circle(0px at 57% 10%);
-webkit-clip-path: circle(0px at 57% 10%);
transition: all 1s ease-out;
pointer-events: none;
text-align: center;
z-index: 1;
}
.nav-links.open{
clip-path: circle(1000px at 57% 10%);
-webkit-clip-path: circle(1000px at 57% 10%);
pointer-events:all;
}
.nav-links li{
opacity: 0;
}
.navlinks li a{
font-size: 25px;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
.nav-link {
color: var(--clr-dark);
font-size: 18px;
}
}
#media screen and (max-width: 1024px) {
.cta-select {
border: 2px solid #f48024;
background: transparent;
color: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
}
.cta-add {
background: #f48024;
width: 100px;
height: 35px;
font-size: 12px;
margin: 30px 0px 0px 10px;
}
.cover img {
height: 65%;
padding: 15px; /*safari*/
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.25;
}
.nav-link {
/* font-size:10px; */
text-decoration: none;
font-weight: 600;
}
.logo-container {
left: 2%;
}
.logo-container img{
max-width: 65px;
max-height: 65px;
}
.calendar {
right: 2%;
visibility: hidden;
}
.logo-click{
display: none;
visibility: hidden;
}
.header {
top: 10;
height: 20vh;
width:100%;
align-items: center;
}
.hamburger{
z-index: 2;
}
}
#media screen and (max-width: 420px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 415px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px; /*Safari*/
padding: 5px;
}
}
#media screen and (max-width: 376px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 361px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
margin: 5px;
padding: 5px;
}
}
#media screen and (max-width: 321px) {
.hamburger{
z-index: 2;
}
.cover img {
height: 56%;
border-radius: 50px;
margin: 5px;
padding: 5px;
}
}
.scrolling{color:#fff;background:orange;height:800px;padding:30px;}
<body>
<header class="header" id="myHeader">
<script src="https://www.google.com/recaptcha/api.js"></script>
<nav role="navigation">
<div class="logo-container" id="myLogo">
<img src="" alt="logo"/>
</div>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#details"> DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
</header>
<div class="scrolling">Content Here</div>
</body>
I want to create a look that allows when a user press the "Scroll" button, the page will scroll with sliding effect. But it does not work on my page. I tried add with tag to my html file but it does not work too.
I found a script for that but it did not work.
Where is my mistake?
home.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{% static 'js/home.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
.
.
.
<section id="section01" class="demo">
<h1> Welcome to PHARSYS </h1>
<h2>Scroll for Login or Signup</h2>
<span></span>
</section>
<section id="section02" class="demo">
<h1>Login</h1><br>
<h2>Press the button to log in to the system.
<br><br>
</h2>
<span></span>Scroll
</section>
<section id="section03" class="demo">
<h1>Signup</h1>
<h2>Press the button to register to the system</h2>
</section>
home.js
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
home.css
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
section {
position: relative;
width: 100%;
height: 100%;
}
section::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 80%;
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
}
section h1 {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 64px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}
section h2 {
position: absolute;
top: 65%;
left: 50%;
z-index: 1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 200 24px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}
#section01 { background: url(https://picsum.photos/1200/800?image=575) center center / cover no-repeat;}
#section02 { background: url(https://picsum.photos/1200/800?image=1016) center center / cover no-repeat;}
#section03 { background: url(https://picsum.photos/1200/800?image=869) center center / cover no-repeat;}
.demo a {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.demo a:hover {
opacity: .5;
}
#section01 a {
padding-top: 60px;
}
#section01 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section01 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section01 a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
border-radius: 100%;
opacity: 0;
-webkit-animation: sdb03 3s infinite;
animation: sdb03 3s infinite;
box-sizing: border-box;
}
#-webkit-keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
#section02 a {
padding-top: 60px;
}
#section02 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section02 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section03 a {
padding-top: 60px;
}
#section03 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section03 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section03 a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
border-radius: 100%;
opacity: 0;
-webkit-animation: sdb03 3s infinite;
animation: sdb03 3s infinite;
box-sizing: border-box;
}
#-webkit-keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
Your problem was here
$('a[href*=#]').on('click', function(e) { ...
To target the anchor elements that have a href attribute which begin with the # character you would use ^ (instead of *), which means starts with, and you would also add some parentheses around the search character like this
$('a[href^="#"]').on('click', function(e) { ...
Check below:
Note: I purposefully gave the body a height of 1000px so we can test and run here.
$(function() {
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
body {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{% static 'js/home.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<section id="section01" class="demo">
<h1> Welcome to PHARSYS </h1>
<h2>Scroll for Login or Signup</h2>
<span></span>
</section>
<section id="section02" class="demo">
<h1>Login</h1><br>
<h2>Press the button to log in to the system.
<br><br>
</h2>
<span></span>Scroll
</section>
<section id="section03" class="demo">
<h1>Signup</h1>
<h2>Press the button to register to the system</h2>
</section>
You can also use the * as a wild card instead of ^, which will then match anchor elements that have a # character anywhere in their href attribute, and not just begin with #.
I build some simple flipping hexagons on CodePen with TweenLite. If you click them, they flip over and reveal the other side.
The problem I am facing at the moment is that after every reload the very first flip doesn't render (Windows 10, Google Chrome 67). It shows the other side but it doesn't do the TweenLite flip "animation". This does only occur on on the very first flip and it doesn't matter which hexagon you choose. I hope someone can help me with this!
I will post a cut down version of my code on here as well so you don't have to go over to CodePen:
$(document).ready(function() {
"use strict";
$(".hexFront").click(function() {
$(this).hide();
TweenLite.to($(this), 1, {
rotationY: 180,
ease: Power4.easeOut
});
$(this)
.next()
.show();
TweenLite.to($(this).next(), 1, {
rotationY: 0,
ease: Power4.easeOut
});
});
$(".hexBack").click(function() {
$(this)
.prev()
.show();
TweenLite.to($(this).prev(), 1, {
rotationY: 0,
ease: Power4.easeOut
});
$(this).hide();
TweenLite.to($(this), 1, {
rotationY: 180,
ease: Power4.easeOut
});
});
});
body {
background-color: #1c1c1c;
}
#hexGrid {
width: 90%;
margin: 0 auto;
padding-bottom: 5.5%;
overflow: hidden;
list-style-type: none;
}
.hex {
position: relative;
visibility: hidden;
outline: 1px solid transparent;
width: 25%;
}
.hex::after {
content: "";
display: block;
padding-bottom: 86.602%;
}
.hexFront,
.hexBack {
perspective: 800;
transformstyle: preserve-3d;
rotationy: -180;
backfacevisibility: hidden;
}
.hexBack {
display: none;
}
.hexIn {
position: absolute;
width: 96%;
padding-bottom: 110.851%;
margin: 0 2%;
overflow: hidden;
visibility: hidden;
outline: 1px solid transparent;
transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}
.hexInner {
position: absolute;
visibility: visible;
outline: 1px solid transparent;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}
.hexInner img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
transform: rotate3d(0, 0, 0, 0deg);
opacity: 0.75;
filter: grayscale(100%);
transition: 4s;
}
.hexInner img:hover {
opacity: 1;
filter: grayscale(0%);
transition: 0s;
}
.hexInner p {
color: black;
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
font-weight: 300;
font-size: 2vw;
margin: 0;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hexGrid">
<li class="hex">
<div class="hexFront">
<div class="hexIn">
<div class="hexInner">
<img src="http://lorempixel.com/500/500/" alt="#" />
</div>
</div>
</div>
<div class="hexBack">
<div class="hexIn">
<div class="hexInner">
<p> backside </p>
</div>
</div>
</div>
</li>
</ul>
Add a default value to transform by calling the TweenLite function before the click to avoid the issue:
$(document).ready(function() {
"use strict";
/* Added this */
TweenLite.to($(".hexFront"), 1, { rotationY: 0 });
TweenLite.to($(".hexBack"), 1, { rotationY: 180});
/**/
$(".hexFront").click(function() {
$(this).hide();
TweenLite.to($(this), 1, { rotationY: 180, ease: Power4.easeOut });
$(this)
.next()
.show();
TweenLite.to($(this).next(), 1, { rotationY: 0, ease: Power4.easeOut });
});
$(".hexBack").click(function() {
$(this)
.prev()
.show();
TweenLite.to($(this).prev(), 1, { rotationY: 0, ease: Power4.easeOut });
$(this).hide();
TweenLite.to($(this), 1, { rotationY: 180, ease: Power4.easeOut });
});
});
body{
background-color: #1c1c1c;
}
#hexGrid {
width: 90%;
margin: 0 auto;
padding-bottom: 5.5%;
overflow: hidden;
list-style-type: none;
}
.hex {
position: relative;
visibility: hidden;
outline: 1px solid transparent;
width: 25%;
}
.hex::after {
content: "";
display: block;
padding-bottom: 86.602%;
}
.hexFront,
.hexBack {
perspective: 800;
transformstyle: preserve-3d;
rotationy: -180;
backfacevisibility: hidden;
}
.hexBack {
display: none;
}
.hexIn {
position: absolute;
width: 96%;
padding-bottom: 110.851%;
margin: 0 2%;
overflow: hidden;
visibility: hidden;
outline: 1px solid transparent;
transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}
.hexInner {
position: absolute;
visibility: visible;
outline: 1px solid transparent;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}
.hexInner img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
transform: rotate3d(0, 0, 0, 0deg);
opacity: 0.75;
filter: grayscale(100%);
transition: 4s;
}
.hexInner img:hover {
opacity: 1;
filter: grayscale(0%);
transition: 0s;
}
.hexInner p {
color: black;
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
font-weight: 300;
font-size: 2vw;
margin: 0;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hexGrid">
<li class="hex">
<div class="hexFront">
<div class="hexIn">
<div class="hexInner">
<img src="https://picsum.photos/500" alt="#" />
</div>
</div>
</div>
<div class="hexBack">
<div class="hexIn">
<div class="hexInner">
<p> backside </p>
</div>
</div>
</div>
</li>
</ul>
Your code looks overcomplicated to me.
You might avoid using TweenLite at all:
$(document).ready(function() {
"use strict";
$(".hexFront, .hexBack").click(function() {
$(this).css({transform: 'rotateY(180deg)', opacity:0})
.next().css({transform: 'rotateY(0deg)', opacity:1}).end()
.prev().css({transform: 'rotateY(0deg)', opacity:1});
});
});
body{
background-color: #1c1c1c;
}
#hexGrid {
width: 90%;
margin: 0 auto;
padding-bottom: 5.5%;
overflow: hidden;
list-style-type: none;
}
.hex {
position: relative;
visibility: hidden;
outline: 1px solid transparent;
width: 25%;
}
.hex::after {
content: "";
display: block;
padding-bottom: 86.602%;
}
.hexFront,
.hexBack {
perspective: 800;
transform-style: preserve-3d;
transform: rotateY(0deg);
backface-visibility: hidden;
transition:all 1s ease-out;
}
.hexBack {
opacity:0;
transform: rotateY(180deg);
}
.hexIn {
position: absolute;
width: 96%;
padding-bottom: 110.851%;
margin: 0 2%;
overflow: hidden;
visibility: hidden;
outline: 1px solid transparent;
transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}
.hexInner {
position: absolute;
visibility: visible;
outline: 1px solid transparent;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}
.hexInner img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
transform: rotate3d(0, 0, 0, 0deg);
opacity: 0.75;
filter: grayscale(100%);
transition: 4s;
}
.hexInner img:hover {
opacity: 1;
filter: grayscale(0%);
transition: 0s;
}
.hexInner p {
color: black;
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
font-weight: 300;
font-size: 2vw;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="hexGrid">
<li class="hex">
<div class="hexBack">
<div class="hexIn">
<div class="hexInner">
<p> backside </p>
</div>
</div>
</div>
<div class="hexFront">
<div class="hexIn">
<div class="hexInner">
<img src="https://picsum.photos/500" alt="#" />
</div>
</div>
</div>
</li>
</ul>
I have this vertical CSS Carousel working fine.
var carousel = $(".carousel"),
currdeg = 0;
$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);
function rotate(e){
if(e.data.d=="n"){
currdeg = currdeg - 60;
}
if(e.data.d=="p"){
currdeg = currdeg + 60;
}
carousel.css({
"-webkit-transform": "rotateX("+currdeg+"deg)",
"-moz-transform": "rotateX("+currdeg+"deg)",
"-o-transform": "rotateX("+currdeg+"deg)",
"transform": "rotateX("+currdeg+"deg)"
});
}
body {
background: #333;
padding: 70px 0;
font: 15px/20px Arial, sans-serif;
}
.transformer {
transform: translateY(150px);
}
.container {
margin: 0 auto;
width: 250px;
height: 200px;
position: relative;
perspective: 1000px;
}
.carousel {
height: 100%;
width: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.item {
display: block;
position: absolute;
background: #000;
width: 250px;
height: 200px;
line-height: 200px;
font-size: 5em;
text-align: center;
color: #FFF;
opacity: 0.95;
border-radius: 10px;
}
.a {
transform: rotateX(0deg) translateZ(250px);
background: #ed1c24;
}
.b {
transform: rotateX(60deg) translateZ(250px);
background: #0072bc;
}
.c {
transform: rotateX(120deg) translateZ(250px);
background: #39b54a;
}
.d {
transform: rotateX(180deg) translateZ(250px);
background: #f26522;
}
.e {
transform: rotateX(240deg) translateZ(250px);
background: #630460;
}
.f {
transform: rotateX(300deg) translateZ(250px);
background: #8c6239;
}
.next, .prev {
color: #444;
position: absolute;
top: 100px;
padding: 1em 2em;
cursor: pointer;
background: #CCC;
border-radius: 5px;
border-top: 1px solid #FFF;
box-shadow: 0 5px 0 #999;
transition: box-shadow 0.1s, top 0.1s;
}
.next:hover, .prev:hover { color: #000; }
.next:active, .prev:active {
top: 104px;
box-shadow: 0 1px 0 #999;
}
.next { right: 1em; }
.prev { left: 1em; }
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="transformer">
<div class="container">
<div class="carousel">
<div class="item a">A</div>
<div class="item b">B</div>
<div class="item c">C</div>
<div class="item d">D</div>
<div class="item e">E</div>
<div class="item f">F</div>
</div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>
</div>
I'm just in need of help with some visual tweaking.
How can I fade out the elements, so that only the div in view (front)
is 100% visible. The other elements should fade from 100% to 0%, depending
on how far away they are from the front.
Any ideas? Thank you very much.