making a photo slide 1px per 20 milliseconds - javascript

I need help making the transition duration, specifically, when the photo slide to the left, it slides 1px per 20 milliseconds.
The transition should happen when clicking on the photo itself, not the bars below.
While the sliding is in process, clicking the image will not have any effect.
When the second image takes the place of the first one, the first image will take place(circular fashion).
body{
margin: 0;
padding: 0;
background: #34495e;
}
.slidershow{
width: 700px;
height: 400px;
overflow: hidden;
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.navigation{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.bar{
width: 50px;
height: 10px;
border: 2px solid #fff;
margin: 6px;
cursor: pointer;
transition: 0.4s;
}
.bar:hover{
background: #fff;
}
input[name="r"]{
position: absolute;
visibility: hidden;
}
.slides{
width: 500%;
height: 100%;
display: flex;
}
.slide{
width: 20%;
transition: 0.02s;
}
.slide img{
width: 100%;
height: 100%;
}
#r1:checked ~ .s1{
margin-left: 0;
}
#r2:checked ~ .s1{
margin-left: -20%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>hw3</title>
</head>
<body>
<div class="slidershow middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<div class="slide s1">
<img src="1.jpg" alt="image">
</div>
<div class="slide">
<img src="2.jpg" alt="image">
</div>
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
</div>
</div>
</body>
</html>

Related

JavaScript: How can I make the CSS translate function end up in a given div regardless of where it starts?

I am trying to create a card game but I am stuck at the end point of the Translate function, the player has 30 cards (for programming I only use four since it is easier with less lines), when clicking on a card, the card makes an animation with translate and rotate to reveal the value of the card, and since I only need to reveal the value of 3 cards, I need them to end up in a specific place and be clearly visible, even if the user chooses consecutive cards.
The problem is that I can't make the card end in the div that has the Card1 label, since translate moves me according to the starting point and doesn't to the end point. Can someone help me find a way to do this with translate or is there any other way to do it?
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #100e17;
font-family: sans-serif;
}
.container {
position: absolute;
height: 280px;
width: 1200px;
top: 60px;
left: calc(28% - 300px);
display: flex;
}
.card{
position: relative;
transition: all 1s ease;
transform: perspective(600px);
transform-origin: 100% 50%;
transform-style: preserve-3d;
}
.card1 {
display: flex;
height: 260px;
width: 200px;
background-color: #17141d;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
}
.card2 {
display: flex;
height: 260px;
width: 200px;
background-color: red;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
backface-visibility: hidden;
}
.animate{
position: relative;
transform: perspective(600px) translate(0px, 300px) rotateY(-180deg);
transform-origin: 100% 50%;
transition-property: transform;
transition-duration: 3s;
}
.card .card1,
.animate .card .card2{
position: absolute;
backface-visibility: hidden;
}
.card .card2 {
transform: rotateY(-180deg);
}
.title {
color: white;
font-weight: 300;
position: absolute;
left: 20px;
top: 15px;
}
.answer {
position: absolute;
height: 260px;
width: 300px;
top: 360px;
left: 250px;
display: flex;
}
label {
color: white;
}
.solve {
display: flex;
height: 260px;
width: 200px;
background-color: #17141d;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card1">
<h3 class="title">Card front 1</h3>
</div>
<div class="card2">
<h3 class="title">Card back 1</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 2</h3>
</div>
<div class="card2">
<h3 class="title">Card back 2</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 3</h3>
</div>
<div class="card2">
<h3 class="title">Card back 3</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 4</h3>
</div>
<div class="card2">
<h3 class="title">Card back 4</h3>
</div>
</div>
</div>
<div class="answer">
<label for="solve">Card 1</label>
<div class="solve" id="solve"></div>
</div>
<script>
const card = document.querySelectorAll(".card");
const card2 = document.querySelector('.card2');
let fragment = document.querySelector(".solve");
card.forEach((card) => {
card.style.display = 'block';
card.onmousedown = function () {
card.classList.add('animate');
};
</script>
</body>
</html>

Why my slick slider with indicator not working?

I have a question about slick sliders. I've made a slider with a slick, I want to create an indicator for each slide. I have the code in Codepen, please check.
What I Want
When I was on the first slide, the active border was on the slider 1 indicator, when I was on slide 2 the indicator was on the slider 2 indicator as below.
I've been looking for several ways but still nothing I can use. if you know how, please help me. Because I don't know how to make custom indicators like that. I need your help please.
HTML
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="first-layer">
<p>01</p>
<p>01</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="first-layer">
<p>02</p>
<p>02</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-indicator">
<div class="slider-1 active">
For Slider 1
</div>
<div class="slider-2">
For Slider 2
</div>
</div>
</div>
</div>
</div>
</section>
CSS
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
#homeBanner {
height: 100vh ;
padding: 0;
.slider-banner {
height: 100%;
width: 100%;
.item {
height: 100vh ;
.content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
.first-layer{
position: absolute;
top: 45%;
left: 0;
transform: translate(0, -45%);
p {
color: #fff;
font-size: 350px;
opacity: .15;
&:nth-child(2){
position: absolute;
font-size:45px;
top: 40%;
left: 25%;
transform: translate(-25%, -40%);
opacity: 1;
&::before{
content: '';
position: absolute;
width: 20px;
height: 3px;
background-color: #fff;
top: 10px;
left: -50px;
}
}
}
}
.second-layer{
.title{
width:55%;
h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
}
.date{
display: flex;
position: relative;
margin-top: 30px;
p{
color: #e6e6e6;
margin-right: 10px;
font-size: 15px;
&:nth-child(2){
padding-left: 10px;
position: relative;
display:none;
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #e6e6e6;
height: 100%;
}
}
}
}
}
}
}
}
}
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 55%;
left: 5%;
transform: translate(-5%, -55%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 48%;
left: 5%;
transform: translate(-5%, -48%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.slider-indicator {
position: absolute;
display: flex;
bottom: 15%;
left: 50%;
transform: translate(-50%, -15%);
z-index: 1;
.slider-1, .slider-2 {
color: #fff;
padding: 10px 40px;
border-top: 1px solid #000;
&.active{
border-top: 3px solid #EB961D;
}
}
}
JS
var bannerSlider = $('.slider-banner');
$('.slider-banner').slick({
// arrows: false,
// dots: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><img src='assets/img/component/icon/arrowBlockLeft.svg' class='img-fluid'></button>",
nextArrow: "<button class='arrowBannerRight'><img src='assets/img/component/icon/arrowBlockRight.svg' class='img-fluid'></button>",
});
$(".arrowBannerLeft").on("click", function() {
$('.slider-banner').slick("slickNext");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide")
});
$(".arrowBannerRight").on("click", function() {
$(".slider-banner").slick("slickPrev");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide");
});
$('.slider-banner').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var active_val = parseInt($(".slider-indicator .slide").addClass('active'));
var currentSlideIndex = nextSlide;
});

Check out this snippet:
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
#homeBanner {
height: 100vh ;
padding: 0;
.slider-banner {
height: 100%;
width: 100%;
.item {
height: 100vh ;
.content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
.first-layer{
position: absolute;
top: 45%;
left: 0;
transform: translate(0, -45%);
p {
color: #fff;
font-size: 350px;
opacity: .15;
&:nth-child(2){
position: absolute;
font-size:45px;
top: 40%;
left: 25%;
transform: translate(-25%, -40%);
opacity: 1;
&::before{
content: '';
position: absolute;
width: 20px;
height: 3px;
background-color: #fff;
top: 10px;
left: -50px;
}
}
}
}
.second-layer{
.title{
width:55%;
h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
}
.date{
display: flex;
position: relative;
margin-top: 30px;
p{
color: #e6e6e6;
margin-right: 10px;
font-size: 15px;
&:nth-child(2){
padding-left: 10px;
position: relative;
display:none;
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #e6e6e6;
height: 100%;
}
}
}
}
}
}
}
}
}
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 55%;
left: 5%;
transform: translate(-5%, -55%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 48%;
left: 5%;
transform: translate(-5%, -48%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.slider-indicator {
position: absolute;
display: flex;
bottom: 15%;
left: 50%;
transform: translate(-50%, -15%);
z-index: 1;
}
.slider-1, .slider-2 {
color: #fff;
padding: 10px 40px;
border-top: 1px solid #000;
}
.slider-1.active, .slider-2.active{
border-top: 3px solid #EB961D;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<title>Test</title>
</head>
<body>
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="first-layer">
<p>01</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="first-layer">
<p>02</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-indicator">
<div class="slider-1 active">
For Slider 1
</div>
<div class="slider-2">
For Slider 2
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<script type="text/javascript">
var bannerSlider = $('.slider-banner');
$('.slider-banner').slick({
// arrows: false,
// dots: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
nextArrow: "<button class='arrowBannerRight'><i class='fas fa-chevron-right'></i></button>",
});
$(".arrowBannerLeft").on("click", function() {
$('.slider-banner').slick("slickNext");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide")
});
$(".arrowBannerRight").on("click", function() {
$(".slider-banner").slick("slickPrev");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide");
});
$('.slider-banner').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$(".slider-"+(nextSlide+1)).addClass('active');
$(".slider-"+(currentSlide+1)).removeClass('active');
var currentSlideIndex = nextSlide;
});
</script>
</body>
</html>

how to change the background color in accordion

I am new in javascript and try to make accordion with jquery but it seems it change the background color of the div and no matter what is the setting of the background color in the css the accordion doesn't seems to respond.
here is the html code
<!doctype html>
<html>
<head>
<title>dreampage </title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
</head>
<body>
<div class="newsbackground">
<div class="newsfeed">
here is the div that I manipulate to become accordion
<div class="fake_background_post">
<h1 class="poster">
<p class="post_text">Share your feeling to us! </p>
</h1>
</div>
<div class="post_panel">
<form action="index.php" method="get" name="post">
<img class="upload_video_and_picture" src="./img/logo/camera.png" />
<p class="upload_video_and_picture_post_text"> <b>Upload Pictures or Video </b> </p>
<textarea placeholder="say something!!!" class="post_content" name="post_content" cols="60%" > </textarea>
<div class="feeling">
<p class="feeling_text">FEELING!!! </p>
<div class="feeling_logo">
<img class="happy" src="./img/logo/happy-ticon.png" />
<img class="excited" src="./img/logo/excited.png" />
<img class="sad" src="./img/logo/sad-ticon.png" />
<img class="mad" src="./img/logo/mad-ticon.png" />
<img class="bored" src="./img/logo/bored-ticon.png" />
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(".post").accordion ({
animate: 1500,
active: 1,
coolapsible: true,
event: "click",
heightstyle: "content",
});
</script>
</body>
</html>
here is the css code
* {margin: 0px;
padding; 0px;
font-family:comic sans ms;
}
.post_content {
border: 1px solid #472b1d;
background-color: #ebe7db;
color: #472b1d;
width: 99%;
}
.post_panel {
position: relative;
top: 10px;
left: 0px;
height: 200px;
width: 87.5%;
background-color: #d2c195;
margin-bottom: 50px;
}
.post_panel img {
position:relative;
width: 30px;
height: 20px;
}
.upload_video_and_picture {
position:relative;
top: 8px;
left: 10px;
}
.upload_video_and_picture_post_text {
position:relative;
top: -20px;
left: 50px;
}
.feeling {
position:relative;
top: 8px;
left: 10px;
}
.feeling img {
position:relative;
top: -21px;
left:100px;
}
this is the the css code where the background color doesn't seems to respond
.post {
position: relative;
top: 20px;
left: 220px;
padding-bottom: -200px;
margin-bottom: 120px;
width: 48%;
background-color: #d2c195;
}
.post > .fake_background_post {
background-color: #d2c195;
}
.post_text {
position: relative;
top: -23px;
left: 110px;
font-size: 70%;
# background-color: #d2c195;
}
.fake_background_post {
position: relative;
width: 100%;
height: 70px;
height: 33px;
left: 0px;
top: 00px;
background-color: #d2c195;
margin-bottom: 10px;
border: 2px solid #472b1d;
border-radius: 20px;
transition: 0.5s;
}
.fake_background_post:hover {
background-color: #472b1d;
color: #d2c195;
}

How to position text inside an image in css

How do I add text in the left border of the image?
css:
.container {
position: relative;
width: 100%;
}
.summary-screen .thumbnail {
height: 100%;
width: 100%;
margin: auto;
border: 1px solid #cbcbcb;
display: block;
margin-top: 109px;
position: relative;
}
.summary-screen .primary-text {
background:lightblue;
height: 5%;
opacity: 0.5;
position: absolute;
top: 85%;
/* width: 80%; */
text-align: left;
font-size: 20px;
color: black;
}
html:
<div class="summary-screen">
<div class="container">
<div layout="row" layout-align="center">
<md-content>
<img ng-show="$ctrl.package.image" flex="85" class="thumbnail" ng-src="{{ $ctrl.package.image }}" />
</md-content>
</div>
<div layout="row" layout-align="left">
<h4 class="primary-text" flex style="text-align: left;">{{ $ctrl.package.name }}</h4>
</div>
</div>
</div>
this is how it works now ( its too much left as u can see, i want it exactly at the right place and i want that the background will be along all the pic to the right

When you wrap your text and image you're able to "stick" the text to the bottom.
HTML/CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container_relative {
position: relative;
width: 100%;
max-width: 500px;
}
.container_relative .text {
position: absolute;
bottom: 0;
background-color: rgba(0,0,255,0.5);
width: 100%;
}
.container_relative img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="container_relative">
<img src="https://dummyimage.com/500x400/c9c9c9/00000">
<div class="text">
<p>Lorem Ipsum</p>
</div>
</div>
</body>
</html>

Fader Differ from Div

so I found this cool JQuery fader which does exactly what I wanted. The background fades, but when the transistion from image to image occurs all my other divs hide and then show basically.
I want to make it so only the background image will fade and the divs won't essentially flicker. I can produce a short video if need be.
HTML and JQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function fader() {
$("img").first().appendTo('#wrap').fadeOut(3000);
$("img").first().fadeIn(3000);
setTimeout(fader, 4200);
}
</script>
</head>
<body onLoad="fader();">
<div id="wrap">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
<div id="wrapper">
<div id="header">
<div id="sv_title">Title</div>
<div id="sv_subtitle">Subtitle</div>
</div>
<div id="content_left">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="content_right">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
CSS:
html { overflow-x: hidden; overflow-y: hidden; }
img{
position:absolute;
top:0;
display:none;
width:1920px;
height:1080px;
border: none;
}
body{
margin: 0;
padding: 0;
}
#wrap {
margin: 0;
padding: 0;
}
/* End Setup */
/* Detail */
#wrapper {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
}
#header {
height: 100px;
width: 900px;
background-color: #000000;
opacity: 0.7;
}
#content_left {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: right;
margin-top: 10px;
}
#content_right {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: left;
margin-top: 10px;
}
#footer {
height: 50px;
width: 900px;
background-color: #000000;
opacity: 0.7;
position: absolute;
bottom: 0;
margin-bottom: 30px;
}

this should do the job:
function fader() {
$("#background img:first").appendTo('#background').fadeOut(3000);
$("#background img:first").fadeIn(3000);
setTimeout(fader, 4200);
}
and the fix in the html
<div id="wrap">
<span id="background">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
</span>
<div id="wrapper">
<!-- and the rest of the markup -->
it's not tested, I'm to lazy at the moment to create a fiddle and mock your images.

Categories

Resources