It's been many questions in regards to this but I haven't found a solution that works for me. This is creating a slider , with html and css only
<div class="slider-holder">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<div class="image-holder">
<img src="1.jpg" class="slider-image" />
<img src="2.jpg" class="slider-image" />
<img src="3.jpg" class="slider-image" />
</div>
<div class="button-holder">
</div>
</div>
css:
.slider-holder{
width: 800px;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-holder
{
width: 2400px;
background-color: red;
height: 400px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slider-image
{
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slider-image-1:target ~ .image-holder
{
left: 0px;
}
#slider-image-2:target ~ .image-holder
{
left: -800px;
}
#slider-image-3:target ~ .image-holder
{
left: -1600px;
}
.button-holder
{
position: relative;
top: -20px;
}
.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}
The issue is that if I use preventdefault or "#!" the events won't actually happen , and so the slider won't change.
I've also found using
function keepLocation(oldOffset) {
if (window.pageYOffset!= null){
st=oldOffset;
}
if (document.body.scrollWidth!= null){
st=oldOffset;
}
setTimeout('window.scrollTo(0,st)',10);
}
and adding
works but there's that split second up and back down , which doesn't look good.
Anyone with a possible solution for the link to work with any jumping or moving of the page ?
Thanks in advance
Just use e.preventDevault() in function
function keepLocation(e) {
e.preventDefault();
}
Related
i wanna make a image slider in which png will slide from left to right or right to left depending on the user decision. the design is like a wrapper div . Inside are three divs two for the left and right toggle buttons and one for the img in the middle
Here is the answer
<!DOCTYPE html>
<html>
<head>
<title>Slideshow Images</title>
<style>
.slider {
width: 500px;
height: 300px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-container {
width: 1500px;
background-color: pink;
height: 300px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slide {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slide-1:target ~ .image-container {
left: 0px;
}
#slide-2:target ~ .image-container {
left: -500px;
}
#slide-3:target ~ .image-container {
left: -1000px;
}
.buttons {
position: relative;
top: -20px;
}
.buttons a {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="slider">
<span id="slide-1"></span>
<span id="slide-2"></span>
<span id="slide-3"></span>
<div class="image-container">
<img src="https://i.ibb.co/j89STLM/drb-flowrt-by-gleb-1.webp" class="slide" width="500" height="300" />
<img src="https://i.ibb.co/kmnTxRQ/Neon-Backgrounds-Pictures-4k-1536x864.jpg" class="slide" width="500" height="300" />
<img src="https://i.ibb.co/Ks5DNqf/Neon-4k-Wallpaper-1536x864.jpg" class="slide" width="500" height="300" />
</div>
<div class="buttons">
</div>
</div>
</body>
</html>
I'm working on a slideShow and I'm trying to make .slidesTextes have a translation from the bottom and an opacity change, all controlled by a button that call a JS function.
However, it only works once : when the page is fully loaded. I tried to find out why, but I'm stuck. All I can say is that when I use the console and type my JS code ligne by ligne, it works perfectly. But if I type the full JS code at once in the console, it doesn't work anymore...
Please find the code below :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta title="">
<link rel="stylesheet" href="styleSheet.css">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
</head>
<body>
<div class="slides">
<div class="slidesImages">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
</div>
<div class="slidesTextes">
<span class="slidesTitre"><h2>First title</h2></span>
<span class="slidesTitre"><h2>Second title</h2></span>
<span class="slidesTitre"><h2>Third title</h2></span>
<span class="slidesTitre"><h2>Forth title</h2></span>
</div>
<div class="slidesBoutons">
<span id="slidesNumeros">1/4</span>
<a class="fleche" onclick="changeSlide(-1);"><</a>
<a class="fleche" onclick="changeSlide(1);">></a>
<a class="appelAction" href="https://tout-pres-de-chez-moi.fr/pages/demander-une-livraison-a-domicile">Button/link →</a>
</div>
</div>
</body>
</html>
Here is the script I use:
<script>
var numeroSlide=1;
afficherSlide(numeroSlide);
function changeSlide(numero){
numeroSlide=numeroSlide+numero;
if(numeroSlide<1){numeroSlide=4;}
if(numeroSlide>4){numeroSlide=1;}
afficherSlide(numeroSlide);
}
function afficherSlide(numeroSlide){
listImages=document.getElementsByClassName("image");
listTitres=document.getElementsByClassName("slidesTitre");
for(i=0;i<listImages.length;i++){
listImages[i].style.display="none";
listTitres[i].style.display="none";
}
listImages[numeroSlide-1].style.display="";
listTitres[numeroSlide-1].style.display="";
document.getElementById("slidesNumeros").innerHTML=numeroSlide+"/"+listImages.length;
apparaitre();
}
function apparaitre(){
document.getElementsByClassName("slidesTextes")[0].style.display="none";
document.getElementsByClassName("slidesTextes")[0].style.display="";
}
</script>
And here is the CSS file:
margin: 0px;
padding: 0px;
}
.slides{
height: 100vh;
position: absolute;
}
.slidesImages{
width: 100vw;
max-width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slidesImages img{
width: 102%;
min-width: 1000px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: slideChange;
animation-duration: 1s;
}
#keyframes slideChange{
from{opacity: 0;}
to{opacity: 1;}
}
.slidesTextes{
font-family: serif;
font-size: 7vh;
font-weight: bold;
color: white;
position: absolute;
bottom: 25vh;
left: 8%;
animation: apparition 1s;
border: 1px solid red;
}
#keyframes apparition{
from{opacity: 0;bottom: 0vh;}
to{opacity:1;bottom: 25vh;}
}
.slidesTextes h2{
display: inline;
background-color: #f4743c;
padding: 0 1vw;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.slidesBoutons{
position: absolute;
bottom: 15%;
left: 8%;
width: 90%;
margin: 0.5vh 0;
}
.slidesBoutons *{
background-color: #29893f;
color: white;
font-family: sans-serif;
font-weight: bold;
font-size: 2.5vh;
float: left;
box-sizing: border-box;
height: 7vh;
line-height: 7vh;
padding: 0 1.5vw;
margin: 0 0.1vw;
text-decoration: none;
}
.slidesBoutons span{
opacity: 0.8;
}
.slidesBoutons a:hover{
background-color: #39994f;
cursor: pointer;
transition: 0.3s ease;
}
The browser is acting correctly; the animation is only triggered when the node renders, and it renders once. You have to remove the animation and re-add it whenever an arrow button gets clicked. The easiest way is to make it its own class (run code snippet):
var numeroSlide = 1;
afficherSlide(numeroSlide);
function changeSlide(numero) {
animation = document.getElementsByClassName("animation")[0];
animation.classList.remove("animation");
setTimeout(()=> animation.classList.add("animation"),0);
numeroSlide = numeroSlide + numero;
if (numeroSlide < 1) {
numeroSlide = 4;
}
if (numeroSlide > 4) {
numeroSlide = 1;
}
afficherSlide(numeroSlide);
}
function afficherSlide(numeroSlide) {
listImages = document.getElementsByClassName("image");
listTitres = document.getElementsByClassName("slidesTitre");
for (i = 0; i < listImages.length; i++) {
listImages[i].style.display = "none";
listTitres[i].style.display = "none";
}
listImages[numeroSlide - 1].style.display = "";
listTitres[numeroSlide - 1].style.display = "";
document.getElementById("slidesNumeros").innerHTML = numeroSlide + "/" + listImages.length;
apparaitre();
}
function apparaitre() {
document.getElementsByClassName("slidesTextes")[0].style.display = "none";
document.getElementsByClassName("slidesTextes")[0].style.display = "";
}
margin: 0px;
padding: 0px;
}
.slides{
height: 100vh;
position: absolute;
}
.slidesImages{
width: 100vw;
max-width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slidesImages img{
width: 102%;
min-width: 1000px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: slideChange;
animation-duration: 1s;
}
#keyframes slideChange{
from{opacity: 0;}
to{opacity: 1;}
}
.slidesTextes{
font-family: serif;
font-size: 7vh;
font-weight: bold;
color: white;
position: absolute;
bottom: 25vh;
left: 8%;
border: 1px solid red;
}
.animation {
animation: apparition 1s;
}
#keyframes apparition{
from{opacity: 0;bottom: 0vh;}
to{opacity:1;bottom: 25vh;}
}
.slidesTextes h2{
display: inline;
background-color: #f4743c;
padding: 0 1vw;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.slidesBoutons{
position: absolute;
bottom: 15%;
left: 8%;
width: 90%;
margin: 0.5vh 0;
}
.slidesBoutons *{
background-color: #29893f;
color: white;
font-family: sans-serif;
font-weight: bold;
font-size: 2.5vh;
float: left;
box-sizing: border-box;
height: 7vh;
line-height: 7vh;
padding: 0 1.5vw;
margin: 0 0.1vw;
text-decoration: none;
}
.slidesBoutons span{
opacity: 0.8;
}
.slidesBoutons a:hover{
background-color: #39994f;
cursor: pointer;
transition: 0.3s ease;
}
<body>
<div class="slides">
<div class="slidesImages">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
</div>
<div class="slidesTextes animation">
<span class="slidesTitre"><h2>First title</h2></span>
<span class="slidesTitre"><h2>Second title</h2></span>
<span class="slidesTitre"><h2>Third title</h2></span>
<span class="slidesTitre"><h2>Forth title</h2></span>
</div>
<div class="slidesBoutons">
<span id="slidesNumeros">1/4</span>
<a class="fleche" onclick="changeSlide(-1);"><</a>
<a class="fleche" onclick="changeSlide(1);">></a>
<a class="appelAction" href="https://tout-pres-de-chez-moi.fr/pages/demander-une-livraison-a-domicile">Button/link →</a>
</div>
</div>
</body>
html
<div class="slidesTextes animation">
javascript
animation = document.getElementsByClassName("animation")[0];
animation.classList.remove("animation");
setTimeout(()=> animation.classList.add("animation"),0);
css
.animation {
animation: apparition 1s;
}
Currently, I am building a style guide and I have a question about the transition of an element. Imagine you have a container with two elements besides each other. Both have 50% width. The left element should always be visible, but the right element slides from the right into its 50% width. How can I achieve something like this? I am a bit overwhelmed with the top, bottom, left, right, position:absolute properties.
The html would look like this:
<div class="module-container">
<div class="first-element">
<div class="second-element">
</div>
and the css like this:
.module-container {
display: flex;
}
.first-element {
width: 50%;
}
.second-element {
width: 50%;
}
which properties does the second Element need in the first place? And which should I add via JavaScript after pressing, for instance, a button?
try using jQuery and transitions
$('#btn').click(function() {
$('.secondElement').toggleClass("slide");
});
.moduleContainer {
display: flex;
height: 100px;
overflow: hidden;
}
.firstElement {
position: relative;
width: 50%;
border: 1px solid #000;
}
.secondElement {
position: relative;
width: 50%;
border: 1px solid #000;
left: 100%;
transition: left 1s;
}
.secondElement.slide {
left: 0;
}
#btn {
display: block;
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="moduleContainer">
<div class="firstElement"></div>
<div class="secondElement"></div>
</div>
<button id="btn">Click Here</button>
.moduleContainer {
display: flex;
height:100px;
}
.moduleContainer > * {
border:1px solid red;
box-sizing:border-box;
overflow:hidden;
}
.firstElement {
height: 100%;
width: 50%;
}
.secondElement {
height: 100%;
width: 0%;
transition:width 0.3s ease;
}
.moduleContainer:hover .secondElement {
width:50%;
}
<div class="moduleContainer">
<div class="firstElement"></div>
<div class="secondElement"></div>
</div>
I have achieved it with pure CSS.I think it's good to have a bar, so the user can hover it and expand.I hope it will help you.
.moduleContainer{ display: flex;flex-flow: row nowrap; }
.firstElement{ background-color:blueviolet;flex:1;height:100px;position:relative;max-width: 50%; }
.secondElement{ background-color:aqua;height:100px;flex:1;max-width:1%;position:relative;transition:1s ease;left:48%; }
.secondElement:hover{ background-color: chartreuse;left:0px;max-width:50%; }
<div class="moduleContainer">
<div class="firstElement">First Element</div>
<div class="secondElement"></div>
</div>
You can use a negative value for margin-left of the .second-element.
.module-container {
display: flex;
height: 50px;
overflow: hidden;
}
.module-container:hover .second-element {
right: 0;
}
.first-element {
flex: 0 0 50%;
background: #f90;
}
.second-element {
flex: 0 0 50%;
background: #0f9;
right: -50%;
transition: all .6s ease;
position: relative;
}
<div class="module-container">
<div class="first-element"></div>
<div class="second-element"></div>
</div>
Or you can use position: absolute and animate the left property
.module-container {
position: relative;
height: 50px;
overflow: hidden;
}
.module-container:hover .second-element {
right: 0;
}
.first-element {
width: 50%;
background: #f90;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.second-element {
background: #0f9;
width: 50%;
position: absolute;
right: -50%;
top: 0;
bottom: 0;
transition: all .6s ease;
}
<div class="module-container">
<div class="first-element"></div>
<div class="second-element"></div>
</div>
I'm trying to recreate a slideshow/carousel effect I've seen on this website (scroll down past the hero banner): https://www.ktm.com
I think the background of the carousel changing once an item is hovered over looks great. This is how far I've gotten:
https://codepen.io/moy/pen/QVvMxo
Looking at the KTM example it seems overly complicated to me, maybe part of some framework? So I've tried to simplify it where I can.
I don't think my example is a million miles away but it needs some refinement. The main issue I'm having is when the 3 items are hovered over, making sure the images fade in/out rather than instantly change. Is that going to be possible with the method I'm using, updating the img src="" using a data-* attribute?
I tried adding in .fadeIn and .delay but it didn't seem to do anything.
Another issue I'm having is when you remove the mouse from the carousel after hovering over the items the text seems to flicker. It looks like it's to do with the img opacity changing as when I remove that it doesn't happen - but I haven't gotten to the bottom of that yet, so any pointers will be greatly appreciated.
Thanks!
$(".carousel__item").hover(function() { // Changes the .image-holder's img src to the src defined in .list a's data attribute.
var value = $(this).attr('data-src');
$(".carousel__bg img").attr("src", value);
});
.carousel {
background: #222;
border: 1px solid white;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%;
max-width: 1200px;
}
.carousel__bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.carousel__bg img {
-o-object-fit: cover;
object-fit: cover;
height: 100%;
width: 100%;
}
.carousel__item {
border: 1px solid white;
box-sizing: border-box;
float: left;
position: relative;
width: 33.33333%;
}
.carousel__content {
box-sizing: border-box;
color: #fff;
height: 100%;
padding: 15px;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-backface-visibility: hidden;
}
.carousel__title {
transition: all .25s;
-webkit-backface-visibility: hidden;
}
.carousel__subtitle {
display: none;
-webkit-backface-visibility: hidden;
}
.carousel__btn {
background: #fff;
color: #222;
display: block;
opacity: 0;
position: absolute;
padding: 15px 30px;
bottom: 15px;
left: 15px;
right: 15px;
text-align: center;
text-decoration: none;
transition: all .25s;
-webkit-backface-visibility: hidden;
}
.carousel__image {
display: block;
opacity: 1;
transition: all .25s;
width: 100%;
max-width: 100%;
-webkit-backface-visibility: hidden;
}
.carousel:hover .carousel__title {
opacity: .25;
}
.carousel:hover .carousel__image {
opacity: 0;
}
.carousel:hover .carousel__item:hover .carousel__title {
opacity: 1;
}
.carousel:hover .carousel__item:hover .carousel__flag {
display: none;
}
.carousel:hover .carousel__item:hover .carousel__subtitle {
display: block;
}
.carousel:hover .carousel__item:hover .carousel__btn {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<div class="carousel__bg">
<img src="https://fillmurray.com/800/300">
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/500">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #1</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/400">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #2</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/300">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #3</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
</div>
Create those images with style="display: none" instead of replacing the image source. Then you can use jquery $(".carousel__item").hover( showImage, hideImage ) to achieve your goal.
$(image).show() and $(image).hide() should be enough for what you want
I have this issue: I've animated an arrow pointing down and placed it under the "login" in my navbar, but it seems that when the animation gets close tu the "login", I can't press, like it's blocking it somehow, is there a way to fix this? Or should I remove the animation?
This is what happens
body{
margin: 0;
padding: 0;
background: white;
}
.circle {
position: absolute;
top: 10%;
left: 83.5%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
text-align: center;
line-height: 110px;
color: white;
font-size: 30px;
overflow: hidden;
color: yellow;
}
.circle {
margin: 0;
padding: 0;
animation: animate 1s infinite;
right: 0;
}
#keyframes animate {
50%{
transform: translateX(-50px);
margin-top: -30px;
}
<body>
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>INICIO</li>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
<div class="circle">
<i class="fas fa-angle-down"></i>
</ul>
</div>
</nav>
</header>
</body>
It seems like you could make use of CSS pointer-events
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
If you set pointer-events:none; for the css element, it won't block links it covers.
Example:
.circle{
pointer-events: none;
}