I'm excited about creating a unique scrolling image collage with image bubbles!
I want something similar to this
The design is ready, but I need help implementing the auto carousel slider effect to make the images slide continuously. Can anyone assist me with this?
var frst_Img = document.querySelector(".image1");
var scnd_Img = document.querySelector(".image2");Consider the following alternative approach, which could potentially guide you towards a solution.
$(function() {
var speed = 1;
var canvas = $(".wrapper");
function float(el) {
var left = $(el).position().left;
var top = $(el).position().top;
left -= (speed + Math.random());
top = top + (Math.random() < 0.5 ? -1 : 1);
if (left < (0 - $(el).width())) {
// Element is offscreen
$(el).css("left", "115%");
} else {
$(el).animate({
left: left,
top: top
});
}
}
var timer = setInterval(function() {
$("[class^='image']").each(function() {
float(this);
});
}, 600);
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: aliceblue;
}
div#container {
width: 1150px;
padding: 5px;
margin: 15px auto;
display: block;
overflow: hidden;
border: 2px solid black;
background: white;
box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
}
.wrapper {
width: 100%;
box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}
div[class^='row'] {
width: 100%;
height: 175px;
position: relative;
}
div[class^='image'] {
position: absolute;
top: 0%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
}
div.large {
width: 150px;
height: 150px;
}
.image1 {
left: 15%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=1);
}
.image2 {
left: 50%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=2);
}
.image3 {
left: 85%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=3);
}
.image4 {
left: 115%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=4);
}
.image5 {
left: 0%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=5);
}
.image6 {
left: 33%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=6);
}
.image7 {
left: 66%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=7);
}
.image8 {
left: 100%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=8);
...
</div>Instead of using CSS for animation, jQuery Animate has been utilized in this scenario.
If you can arrange the HTML elements properly, there may be no need for Javascript.
An easy approach is to ensure that you have multiple copies of the content you want to scroll through, with half of them covering the largest screen size you wish to support.
The default width of 1150 may be too narrow for some screens, so this code snippet involves using 4 copies, shifting them left by 50%, and then back to their original position to create a seamless scrolling effect, allowing CSS (and hopefully the device's GPU) to handle the animation smoothly.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: aliceblue;
overflow: hidden;
}
...
<div id="container">
<div class="block1">
<div class="wrapper" style="/*background: cyan;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
...
</div>
...
</div>
...
</div>I am a beginner learning HTML and CSS, attempting to incorporate a Full Screen Background Image using CSS. Unfortunately, the code I have written is not working as expected despite following various tutorials. Below is my code: HTML file <!DOCTYPE htm ...
In my enum, I store various UI element values organized as follows: const uiElementAttributes = { 1: { id: 1, color: 'red', icon: 'icon-something.png' }, 2: { id: 2, color: 'yellow', ...
I attempted to invoke a method in an asp.net controller using a json string/object from javascript. The asp.net controller code is as follows: public class HomeController : Controller { public ActionResult doWork(string data) { // dowork. ...
Coming from a PHP/Laravel background, my team is considering using Node.js (and sails) for our upcoming project - a collaboration studio for scholars. However, before making the transition, I am curious about the best practices for creating Laravel-style s ...
I have an Ionic 2 project with a blank template containing a page that displays a list. Upon clicking on an item in the list, the user should be able to view more details about that specific item. Below are the files related to the list: list.html: <i ...
Could someone assist me in changing this code to use $.post instead? I've tried replacing some of the code but it's not working properly. Thank you for your help. $.post({ url: "http://192.168.254.107/webs/main/ajax/validateLogin.php", ...
Having trouble with my PayPal button (which is actually express checkout) not working on HTTPS. I first noticed this issue when accessing my live app using HTTPS. I'm unsure if it's my HTTPS setup that's causing the script to fail. <s ...
Being new to Ajax, I am struggling to grasp how to retrieve changing variable values from php. Below is the code snippet that I have been working on: <?php $pfstatetext = get_mypfstate(); $cpuusage= cpu_usage(); ?> <div id="show"> <c ...
Imagine you have two functions filled with random code and the time they take to complete is unknown, depending on the user's system speed. In this scenario, using setTimeout to fire function2 only after function1 finishes is not practical. How can j ...
After customizing the contents of this theme for my website, I encountered an issue with the login form fragment. Each time the page loads, the focus is automatically directed to the username input field, causing a skewed appearance on the page. Despite at ...
After finding out a peculiar phenomenon related to copy and paste, I decided to share it. If you head over to the Diablo 3 website () and scroll down to the bottom of the page, you will notice: ©2012 Blizzard Entertainment, Inc. All rights reserved A ...
I'm currently diving into the world of jQuery and experimenting with adding functionality to one of my websites. I want to create a feature where clicking on a button will change the text and URL of a hyperlink. The problem I'm facing is that whe ...
I've been busy working on a responsive webpage and so far, everything is going smoothly. The only issue I'm facing is that when the browser window size decreases and reaches a certain point, the div elements jump to the next line. Take a look at ...
I am currently working on a project involving PHP and Angular. The values I need for a select ng-options are coming from a database. I am struggling to set a default value for the select component from the parameters. I have searched through various sites ...
Hey everyone! I'm currently using a getJSON function to append some divs, but I want to make the display more dynamic. Is it possible for each div to appear milliseconds apart? For example, the first div fades in, followed by the second, and so on. H ...
My issue involves creating an animation on a Composite that should start when data is loading. To test this, I created animations on regular divs using HTML: <div class="LoadDataWidget"> <div id="arrow" class="greenArrow"></div> < ...
I'm having trouble aligning the cards next to each other. I've written the code below but for some reason, they're not displaying next to each other. What I'm trying to do is call a REST API and get back a list of data. I want to loop ...
Just delving into the world of React and trying to wrap my head around custom hooks, but I keep hitting roadblocks. Here's the latest hurdle that I'm facing, hoping for some guidance. I'm taking a step-by-step approach to creating a functio ...
Utilizing Node.js, Express, Socket.io, firebase admin+auth, and Handlebars. An error Uncaught SyntaxError: Unexpected token < keeps popping up. Whenever I use res.redirect('/login');, I encounter the error. It disappears when I remove res.re ...
Hey there! I've been using CSS for developing desktop websites for quite some time now, and I'm eager to expand my skills to build websites that cater to a variety of devices like phones, smartphones, tablets, and even consoles with web browsers. ...