Goal:
To have a slideshow in this frame.
Here's a jsfiddle of it:
https://jsfiddle.net/kf3cqk6y/2/
$slides:4;
$time_per_slide:4;
$total_animation_time:$time_per_slide * $slides;
body {
background: #000;
}
.container {
margin: 50px auto;
width: 500px;
height: 300px;
overflow: hidden;
border: 10px solid;
border-top-color: #856036;
border-left-color: #5d4426;
border-bottom-color: #856036;
border-right-color: #5d4426;
position: relative;
}
.photo {
position: absolute;
animation: round # {
$total_animation_time
}
s infinite;
opacity:0;
}
#keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
#for $index from 1 to $slides + 1 {
img: nth-child(# {
$index
}
) {
animation-delay: # {
$total_animation_time - $time_per_slide * $index
}
s
}
}
<body>
<div class="container">
<img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
</div>
</body>
Question:
How do I have the images display in the container?
You need to set the fiddle styling to be scss not css
Here's an updated fiddle
And if you want to include it in your web page, use the code from this fiddle
Related
i created an automatic horizontal slider. In my codepen it worked fine, until I realized that if I widen the screen, it no longer works, it is not continuous but leaves a blank space at the end, then it starts all over again brutally. If I insert a fixed and small width to my css everything works fine, but if I remove it and I want it to be full screen, it gives me this problem. How can I solve? thank you
#prodotti {
height:350px;
width:100%;
position:relative;
overflow:hidden;
}
.photo {
position:absolute;
top:0px;
left:0px;
overflow:hidden;
white-space: nowrap;
animation: move 10s linear infinite;
}
.photo img {
margin: 0 0.5em
}
#keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-50%, 0);
}
}
<div id="prodotti">
<div id="photo" class="photo">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
</div>
Now if you see here it works as I want it, but if you try to enlarge the screen or insert it in a full screen page for example 1920px, this is no longer infinite, but it leaves white space.
This is how I see it when it comes to an end.
enter image description here
I also accept advice with javascript, like with infinite margins or I don't know.
It works now, also made it responsive
window.onresize = (() => {
var imgWidth = Math.min(
window.innerWidth,
window.innerHeight
);
document.getElementById('photo').innerHTML = '';
for(var i = 0;true;i++) {
if (
(document.querySelectorAll('img').length * imgWidth) <
(window.innerWidth * 2)) {
var img = new Image();
img.src = "https://picsum.photos/200"
document.getElementById('photo').append(img);
document.getElementById('photo').append(img);
document.getElementById('photo').animation =
`move ${document.querySelectorAll('img').length / 6}s linear infinite`
} else {
return -1;
}
}
});
body {
overflow: hidden;
margin: 0px;
}
#prodotti {
height: 350px;
width: 100%;
position: relative;
overflow: hidden;
}
.photo {
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
white-space: nowrap;
animation: move 10s linear infinite;
padding: 0.5vh;
margin: 8px 0px 0px 0px;
}
.photo img {
margin: 0 0.5em;
height: calc(100vh - 16px);
}
#keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-50%, 0);
}
}
#media only screen and (orientation: portrait) {
.photo img {
margin-top: calc(50vh - 50vw);
height: calc(100vw - 16px);
}
}
<div id="prodotti">
<div id="photo" class="photo">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
</div>
I have 3 images I want to have a fade effect with colors on hover / mouseover event.
This is my code until now
<html>
<head>
<title>Choose Category</title>
<link rel="stylesheet" type="text/css" href="aindex.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<img class="top" id="hover1" src="http://via.placeholder.com/350x150" align="left" width="33%" />
<img class="top" id="hover2" src="http://via.placeholder.com/350x150" align="left" width="33%" />
<img class="top" id="hover3" src="http://via.placeholder.com/350x150" align="left" width="33%" />
</body>
</html>
You can use a pure CSS solution. This one fades out the image on hover and reveals the background that is set for the div.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
img:hover {
animation: fadeout .5s ease forwards;
}
#keyframes fadeout {
to {
opacity: 0;
}
}
<div class="red"><img src="http://placehold.it/100/333333"></div>
<div class="blue"><img src="http://placehold.it/100/666666"></div>
<div class="green"><img src="http://placehold.it/100/000000"></div>
Since you asked for a jQuery solution, here you go:
$(".wrap").hover(function() {
$(this).children("span").fadeOut();
}, function() {
$(this).children("span").fadeIn();
});
.wrap {
position: relative;
width: 180px;
height: 75px;
cursor: pointer;
background-color:blue;
}
.wrap span {
position: absolute;
top: 0;
left: 0;
height:100%;
width:100%;
background: url('https://www.w3schools.com/css/trolltunga.jpg');
background-size:cover;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap"><span></span>Hello</div>
You can use the opacity in Cascading Style Sheet. The value of opacity is from 0 to 1
hover1:hover {
opacity: 0.2;}
hover2:hover {
opacity: 0.2;}
hover3:hover {
opacity: 0.2;}
You need to specify a JQuery function like this which will add the css for opacity dynamically when you hover over the image and remove your mouse pointer from the image.
$(document).ready(function(){
$(".top").on("mouseenter", function(){
$(this).css('opacity','0.7');
});
$(".top").on("mouseleave", function(){
$(this).css('opacity','1');
});
});
For your work around and simplicity here is the added link to PLUNKR
I'm trying to create section with couple images.Idea is to dynamically change those images, but my problem is: when section is loaded and animation is complete whole process stop but it should continue all over again.
Can somebody help me to achieve that?
Thank you.
Here is my code so far:
$(document).ready(function(){
setInterval(function(){
var $slide = $('div.slideUp');
$slide.removeClass('slideUp');
$slide.next().addClass('slideUp');
},2000);
});
.slideSection{
background: #000;
float: left;
width: 100%;
padding: 25px;
position: relative;
overflow: hidden;
}
.block{
width: 100%;
float: left;
display: none;
}
.block img {
float: left;
width: 25%;
height: 100px;
padding: 10px;
margin: 0;
}
.slideUp{
display: block;
animation: slideUp 1s 1;
position: relative;
}
#keyframes slideUp{
from{
opacity: .0;
transform: translate(0, 300px);
}
to{
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideSection">
<div class="block slideUp ">
<img src="img/css.png" alt="css">
<img src="img/js.png" alt="js">
<img src="img/css.png" alt="css">
<img src="img/query.png" alt="js">
</div>
<div class="block">
<img src="img/java.png" alt="css">
<img src="img/sql.png" alt="js">
<img src="img/js.png" alt="js">
</div>
<div class="block">
<img src="img/query.png" alt="js">
<img src="img/java.png" alt="css">
</div>
</section>
You could keep the interval running, but change the way you look for the next slide: check if there is a next one, if so, take it, otherwise pick the first one:
$slide = $slide.next().length ? $slide.next() : $slide.siblings(':first')
$slide.addClass('slideUp');
Your loop is not infinite because last element do not have next() elements. You should check for that to appear and then take first element of collection instead.
Check the snippet below.
$(document).ready(function(){
setInterval(function(){
var $slide = $('div.slideUp');
$slide.removeClass('slideUp');
var $nextSlide = $slide.next();
if(!$nextSlide.length) {
$nextSlide = $('div.block').eq(0);
}
$nextSlide.addClass('slideUp');
}, 2000);
});
.slideSection{
background: #000;
float: left;
width: 100%;
padding: 25px;
position: relative;
overflow: hidden;
}
.block{
width: 100%;
float: left;
display: none;
}
.block img {
float: left;
width: 25%;
height: 100px;
padding: 10px;
margin: 0;
}
.slideUp{
display: block;
animation: slideUp 1s 1;
position: relative;
}
#keyframes slideUp{
from{
opacity: .0;
transform: translate(0, 300px);
}
to{
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideSection">
<div class="block slideUp ">
<img src="img/css.png" alt="css">
<img src="img/js.png" alt="js">
<img src="img/css.png" alt="css">
<img src="img/query.png" alt="js">
</div>
<div class="block">
<img src="img/java.png" alt="css">
<img src="img/sql.png" alt="js">
<img src="img/js.png" alt="js">
</div>
<div class="block">
<img src="img/query.png" alt="js">
<img src="img/java.png" alt="css">
</div>
</section>
Thank you all for help I appreciate that.
Here is the another function that working properly.
Sincerly
$(document).ready(function(){
var currentIndex = 0,
items = $('.block'),
itemAmt = items.length;
function cycleItems() {
var item = $('.block').eq(currentIndex);
items.removeClass('slideUp');
item.addClass('slideUp');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 2000);
});
I just made a very simple "imageslider" but it does not slide, so lets call it a "imageswapper".
Alright. My question is now, how can I make it slide in and slide out so its smooth.
JSFIDDLE
[JS]
document.getElementById('atwo').style.display = "none";
function ImgSwap(){
if(document.getElementById('one').style.display == "block"){
document.getElementById('one').style.display = "none";
document.getElementById('two').style.display = "block";
}else{
document.getElementById('two').style.display = "none";
document.getElementById('one').style.display = "block";
}
}
[HTML]
<div id="wrapper">
<a onclick="ImgSwap()" id="aone"><img src="one.jpg" alt="one" class="img" id="one" /></a>
<a onclick="ImgSwap()" id="atwo"><img src="two.gif" alt="two" class="img" id="two" /></a>
</div>
[CSS]
img.img
{
height: 200px;
width: 300px;
}
#one
{
display: block;
}
#two
{
display:none;
}
a:hover
{
cursor: pointer;
}
div#wrapper
{
width: 300px;
}
There are many ways to achieve this effect, one way to do this is by applying css transition to your css class. You can change the opacity and position of the image to create the slides in effect.
function ImgSwap() {
document.getElementById('one').classList.toggle('show');
document.getElementById('two').classList.toggle('show');
}
div#wrapper {
width: 300px;
height: 200px;
position: relative;
background-color: black;
}
.img {
height: 200px;
width: 300px;
position: absolute;
top: 0;
left: -300px;
opacity: 0;
}
a:hover {
cursor: pointer;
}
.show {
left: 0;
opacity: 1;
transition: left 1s;
}
<div id="wrapper">
<a onclick="ImgSwap()" id="aone">
<img src="https://c2.staticflickr.com/6/5120/5824578555_d239d42195_b.jpg" alt="one" class="img show" id="one" />
</a>
<a onclick="ImgSwap()" id="atwo">
<img src="http://petsadviser.supercopyeditors.netdna-cdn.com/wp-content/uploads/2012/06/why-is-cat-scared-rain-thunder.png" alt="two" class="img" id="two" />
</a>
</div>
I have an image at the side of my website, i want to hide most of the image until the user clicks on it (its for a newsletter signup), what would be the best way of going about this?
I just need a section of this image showing, then whenever the user clicks on it the whole image pops out. I know i can use CSS to move the image about, what would the best javascript function to use instead of using the change image function as im only moving the image not changing it?
Example site where this is demonstrated: http://www.plus.de/
Here's a Fiddle
HTML
<div class="slide">
<span class="text">OPEN</span>
</div>
CSS
#overflow {
background: rgba(50,50,50,0.5);
display: none;
width: 100%;
height: 100%;
}
.slide {
background: #0296cc;
position: absolute;
top: 200px;
left: -270px;
width: 300px;
height: 180px;
z-index: 9999;
}
.text {
display: block;
width: 180px;
margin: 80px 0 0 196px;
font-family: Arial;
font-size: 16px;
font-weight: bold;
text-align: center;
letter-spacing: 3px;
color: #fff;
cursor: pointer;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
jQuery
$(function() {
$('.slide').click(function() {
var overflow = ('<div id="overflow"><div>');
$(this).stop().animate({ left: '0' }, 650);
if($('#overflow').length < 1) {
$('body').append(overflow);
}
$('#overflow').fadeIn('slow');
$('#overflow').click(function() {
$(this).fadeOut('slow')
$('.slide').stop().animate({ left: '-270px' }, 650);
});
// Prevents window scroll when overflow is visible
$('#overflow').bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
});
});
BASIC DEMO
<div id="gallery">
<img src="images/img1.jpg" alt="" />
<img src="images/img2.jpg" alt="" />
<img src="images/img3.jpg" alt="" />
<img src="images/img4.jpg" alt="" />
<div id="tabs">
<div>Tab 1</div>
<div>Tab 2</div>
<div>Tab 3</div>
<div>Tab 4</div>
</div>
</div>
CSS:
#gallery{
position:relative;
margin:0 auto;
width:500px;
height:200px;
background:#eee;
}
#gallery > img{
position:absolute;
top:0;
margin:0;
vertical-align:middle;
}
#gallery > img + img{
display:none;
}
#tabs{
position:absolute;
top:0px;
right:0;
height:200px;
width:100px;
}
#tabs > div{
cursor:pointer;
height:49px;
border-bottom:1px solid #ddd;
}
jQuery
$('#tabs > div').click(function(){
var i = $(this).index();
$('#gallery > img').stop().fadeTo(300,0).eq(i).fadeTo(500,1);
});