Currently, I have layered 4 images on top of a background image. When your mouse hovers over each image, it disappears until the user refreshes. I would like to create 26 clones of an image. Ideally, I could position each image copy and the jquery would autogenerate id names like so (#myid(n)) a.k.a #myid1, #myid2. As I am unable to pull this image cloning off so far, I have to copy and paste each block of code over and over again. However, once I added my sixth image, I encountered performance problems, and my code stopped working.
I have included two codepens. This codepen works with 4 image copies : https://codepen.io/narutofan389/collab/NWGpQWo
This codepen doesn't work with 6 copies: https://codepen.io/narutofan389/collab/MWapQyO
I have heard too many mouseover events can create performance issues. I am not sure if this is what the source of my issues. I am also trying on a separate codepen to test image cloning with separate ids. This is the code so far taken from another stack overflow answer:
html
<body>
<div id="sand"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
javascript
$(document).ready(function(){
for (var i = 0; i < 2; i++) {
var img = "<img src ='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4405662/sandsmaller.png'
id='myid"+i+"'/>";
$("body #sand").append(img);
}
})
Again I am trying to generate different ids that I can position individually?
Since your cloning snippet is in jQuery, I hope a solution using it is acceptable.
First I had to add a #sand container missing from your markup, as it's where the code is appending the images. Also added a div wrapper to each image to mirror your codepen (although you might not need it), and added a sand class to the images.
Then, instead of adding an event for each element, I used Event delegation so I can attach just one handler to the wrapping element. I'm targeting all images inside the #sand container that are not already hidden.
And then simplified the css a bit removing redundant rules and moving common properties to the new classes.
for (let i = 1; i <= 6; i++) {
// Create the wrapping div
var $container = $("<div class='sand" + i + "'>");
// Create the img
var $img = $("<img src ='https://s3-us-west-2.amazonaws.com/s.cdpn.io/4405662/sandsmaller.png' class='sand' id='sand" + i + "'/>");
// Add image to container
$container.append($img);
// Add container to the document
$("body #sand").append($container);
}
// Listen when the mouse hovers an image
$('#sand').on('mouseenter', 'img.sand:not(.hide)', function() {
$(this).addClass('hide');
});
$('#sand').on('animationend', 'img.sand.hide', function() {
$(this).hide();
});
html {
background: url(https://i.postimg.cc/HWJvtDGx/lockcorrect.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#-webkit-keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.sand {
position: absolute;
height: 90vh;
}
#sand6 {
top: 0px;
right: 200px;
}
#sand5 {
top: 300px;
left: 500px;
}
#sand4 {
top: 300px;
right: 200px;
}
.hide {
animation: fade 3s;
animation-fill-mode: forwards;
}
#sand3 {
height: 100vh;
top: 0px;
left: 700px;
}
#sand2 {
height: 100vh;
top: 0px;
left: 300px;
}
#sand1 {
position: relative;
height: 100vh;
right: 30px;
}
<div id="bg">
<img src="https://i.postimg.cc/HWJvtDGx/lockcorrect.jpg
" alt="lock">
</div>
<div id="sand">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
I am trying to implement a simple Imageviewer that displays an image that fits screen and when clicked, the image shoud be shown in fullsize.
Everything almost works, but when image is displayed in full-size, there are no scrollbars, so I can only see the center of the image and not explore the rest.
const image = document.getElementById("image");
const imageContainer = document.getElementById("image-container");
image.addEventListener("click", function() {
if (image.classList.contains("full-size")) {
image.classList.remove("full-size");
imageContainer.classList.remove("full-size");
} else {
image.classList.add("full-size");
imageContainer.classList.add("full-size");
}
});
#image-container {
position: relative;
width: 100%;
overflow: hidden;
}
#image {
width: 100%;
height: auto;
transition: transform .5s;
cursor: zoom-in;
}
#image.full-size {
cursor: zoom-out;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 10;
transform: scale(2);
}
#image-container.full-size {
overflow: auto;
}
<div id="image-container">
<img id="image" src="https://bigbookofamigahardware.com/bboah/media/download_photos/cybervisppc_4_big.jpg">
</div>
The implementaion can be seen here:
https://codepen.io/bobittjek/pen/qBMWpdy
I have a simple CSS animation:
<div id="saved-test">
<style type="text/css">
#saved-test {
width: 40px; height: 40px;
background: red;
position: fixed;
top: 0; left: 0;
animation-name: move-to-bottom;
animation-duration: 5s;
z-index: 1000;
}
#keyframes move-to-bottom {
to {
left: 400px;
top: 500px;
}
}
</style>
This works, and it moves as I want nicely. The issue I have, is that I want to set the destination of this element to be different. It will be "moving" to a bottom nav bar, which means the destination left/top positions will vary depending on screen size.
Is it possible to modify the left and top value in the keyframe via Javascript, so it goes to a set position that I set dynamically?
You can write the keyframe entirely with JavaScript as below, which gives you the ability to use dynamic values.
The Element interface's animate() method is a shortcut method which creates a new Animation, applies it to the element, then plays the animation. It returns the created Animation object instance. More and MDN's doc.
document.getElementById("saved-test").animate(
[
// étapes/keyframes
{
left: "0px",
top: "0px"
},
{
left: 400 + "px", // you can set it dynamically
top: 500 +"px" // you can set it dynamically
}
],
{
duration: 5000,
iterations: Infinity
}
);
#saved-test {
width: 40px;
height: 40px;
background: red;
position: fixed;
z-index: 1000;
}
<div id="saved-test">
I am trying to make a div expand smoothly to fullscreen when clicked. The final product I am going for is similar to when a user clicks a case study on this website https://infinum.co/
So far my code can make the div fullscreen but it jumps because of the position fixed I add. I am not bothered whether the actual animation is handled by CSS or JavaScript/jQuery.
$(function() {
$(".block").on("click", function() {
$(this).addClass("fullscreen");
});
});
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.block {
width: 50%;
margin: 0 auto 50px auto;
height: 300px;
background-color: red;
transition: all 0.5s linear;
}
.block.fullscreen {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block"></div>
All I have so far can be found on this pen: http://codepen.io/anon/pen/RKGeYj
make your #block fullscreen first and then apply the position:absolute; after a delay greater than the fullscreen animation speed.
Here's a working snippet.
var isFullscreen = false;
$("#block").click(function (){
var prop = {};
var speed = 910;
if(!isFullscreen){ // MAXIMIZATION
prop.width = "100%";
prop.height = "100vh";
isFullscreen = true;
$("#block").animate(prop,speed);
setTimeout(function() {
$("#block").css("position","absolute");
}, 920);
}
else{
prop.width = "50%";
prop.height = "250px";
isFullscreen = false;
$("#block").animate(prop,speed);
setTimeout(function() {
$("#block").css("position","relative");
}, 920);
}
});
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
#block,#blockTwo{
width:50%;
height:250px;
margin:0 auto;
background-color: red;
}
#block{
z-index:100;
}
#blockTwo{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block"></div>
<div id="blockTwo"></div>
Checkout http://usefulangle.com/post/38/animating-lightbox-with-css-javascript .It contains the animation that you're looking for.
When you're making the position as fixed, you should give the initial top & left properties as well. You can get the initial top & left properties using the getBoundingClientRect method.
Along with animating top & left, you should animate width & height as well for a smoother look.
.in-animation {
animation: inlightbox 0.8s forwards;
position: fixed !important;
}
#keyframes inlightbox
{
50% {
width: 100%;
left: 0;
height: 200px;
}
100% {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
}
I tried a different approach. I used added and removed classlists using a Javascript onclick function. To make so that the image only took the full pages size rather than spreading downward if there was text or contents at the top of page above the image, I put those images in a div and used classlists there too to remove or to add these areas if the picture expanded. For this to work, you will need to stretch your image. If this fits your website, try the following code:
<html>
<head>
<style>
.image {
margin: 0px;
transition: all 0.5s linear;
background-image: url('https://tse2.mm.bing.net/th?id=OIP.4_3Eev4xNVvGA5aRvaevLAHaJa&pid=Api&P=0&w=300&h=300');
background-repeat: no-repeat;
}
.image.small {
width: 200px;
height: 100px;
background-size: cover;
background-size: 100% 100%;
}
.image.fullScreen {
width: 100%;
height: 100%;
background-size: cover;
background-size: 100% 100%;
}
.topContent {
display: contents;
}
.bottomContent {
display: contents;
}
.topContent.remove {
display: none;
}
.bottomContent.remove {
display: none;
}
</style>
</head>
<body>
<div class="topContent">
<h1>Hello</h1>
</div>
<div class="image" onclick="imageChange()"></div>
<div class="bottomContent">
<h1>Hello</h1>
</div>
<script>
window.onload = function() {
document.querySelector('.image').classList.add('small')
}
function imageChange() {
if (document.querySelector('.image').classList.contains('small')) {
document.querySelector('.image').classList.remove('small')
document.querySelector('.image').classList.add('fullScreen')
document.querySelector('.topContent').classList.add('remove')
document.querySelector('.bottomContent').classList.add('remove')
} else {
document.querySelector('.topContent').classList.remove('remove')
document.querySelector('.bottomContent').classList.remove('remove')
document.querySelector('.image').classList.remove('fullScreen')
document.querySelector('.image').classList.add('small')
}
}
</script>
</body>
</html>
If you want the image to stretch all the way to the very edge, that should be very possible. Also, with classlists, you could even turn the background black creating a black border.
i am looking for this kind of template . Moving the page to left and then page to right. Can anyone tell me how can i make this or is there any javascript example similar to this.
Create two <div>s, put them next to each other, make them take up the whole window, and change them as needed.
HTML:
<div class="left">left</div>
<div class="right">right</div>
CSS:
body {
margin: 0;
}
.left {
background-color: green;
bottom: 0;
left: 0;
position: fixed;
top: 0;
transition: width 1s;
width: 0;
}
.left.active {
width: 200px;
}
.right {
background-color: red;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
transition: left 1s;
}
.right.active {
left: 200px;
}
JS (width jQuery):
$('.right').on('click', function() {
$('.left').toggleClass('active');
$('.right').toggleClass('active');
});
And here's a fiddle.
Using .toggle(effect,options,duration) method to moving the page to left to right.
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'right' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('#Id').toggle(effect, options, duration);
Taken via this link
If you want it to animate smooth on all devices you should use css transitions and transforms. Hiding and showing would be as basic as toggling a class then.
The example in jsfiddle
<style media="screen">
.wrapper {
width: 100%;
overflow: hidden;
}
.menu {
height: 100vh;
width: 100px;
background: #ABC;
color: white;
position: absolute;
left:0;
transition: transform 0.3s;
transform: translateX(-100px);
}
.content {
transition: transform 0.3s;
}
.active .menu {
transform: translateX(0);
}
.active .content {
transform: translateX(100px);
}
</style>
<button class="toggle">Toggle</button>
<div class="wrapper">
<div class="menu">
My menu
</div>
<div class="content">
My content
</div>
</div>
<script type="text/javascript">
document.querySelector('.toggle').addEventListener('click', function(event) {
event.preventDefault();
document.querySelector('.wrapper').classList.toggle("active");
});
</script>
NB! Supported from IE10. IE 9 will support without the animation and you probably should add the needed -ms-, -webkit-, -moz-, etc prefixes to support the older browsers if needed for transition and transform properties.
Also I advise not animating body or html with this method and put the content of page in the wrapper (in .content in the examples case). Moving body and html directly may lead to unpleasant surprises later.
I'm trying to build simple modal and for some reason the z-index doesn't work. what is the problem here?
document.addEventListener("DOMContentLoaded", function() {
var aTag = document.querySelector('.img-box');
aTag.addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.add('overlay');
var img = document.createElement('img'),
modalBox = document.getElementById('modal-box')
img.src = this.href;
modalBox.appendChild(img);
})
});
.overlay {
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.4;
width: 100%;
height: 100%;
}
#modal-box {
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#modal-box img {
max-width: 100%;
}
<a href="http://placehold.it/400x200" class="img-box">
<img src="http://placehold.it/100x100" />
</a>
<div id="modal-box"></div>
Alternate demo: http://codepen.io/phpnetanel/pen/qEjJbo
The problem is that you add the .overlay class to the document body. The rest of the content is held in the document body and thus it stays on top. Create a new overlay div and add it to the body and apply the .overlay class to it.
Here's a working example: http://codepen.io/anon/pen/EaXdKw
You are applying the .overlay class to the body. This will not create an overlay above the content like you are expecting. You need to create another element.
This should do what you want.
You just need to change position to relative in place of absolute in the #modal-box and it will work