Scrolling tile images with css - javascript

I wish to have a row of 3 images which will contain around 10 images per row.
The image dimensions are 270x270px and should animate like you'd imagine clouds floating from right to left on the screen.
I'd like the top row of images to go right to left, the middle the opposite direction and the bottom the same as the top but at different intervals.
I'm not 100% sure on how to accomplish this and I'm new to CSS animations.
I've tried floating list items inside of a but the browser appears to clip the ul inside of the window and doesn't let it float off the screen.
see image for details
The images should loop and continue to show a flow of images without any interruption in animation or placement.
Any help getting started would be much appreciated.
G


Do you mean something like this jsFiddle ?
HTML
<div class="container">
<div class="rowContainer">
<div class="row rtl">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
</div>
</div>
<div class="rowContainer">
<div class="row ltr">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
</div>
</div>
<div class="rowContainer">
<div class="row rtl">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
</div>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
#-webkit-keyframes scrollRtL {
0% { transform: translate(0, 0); }
100% { transform: translate(-50%, 0); }
}
#keyframes scrollRtL {
0% { transform: translate(0, 0); }
100% { transform: translate(-50%, 0); }
}
#-webkit-keyframes scrollLtR {
0% { transform: translate(-50%, 0); }
100% { transform: translate(0, 0); }
}
#keyframes scrollLtR {
0% { transform: translate(-50%, 0); }
100% { transform: translate(0, 0); }
}
html, body, .container {
overflow: hidden;
width: 100%;
height: 100%;
}
.rtl {
-webkit-animation: scrollRtL 5s linear infinite;
animation: scrollRtL 5s linear infinite;
}
.ltr {
-webkit-animation: scrollLtR 5s linear infinite;
animation: scrollLtR 5s linear infinite;
}
.rowContainer {
position: relative;
height: 280px;
}
.row {
position: absolute;
white-space: nowrap;
font-size: 0;
}
.cell {
font-family: verdana;
display: inline-block;
font-size: 36px;
width: 270px;
height: 270px;
background-color: red;
color: white;
margin: 5px;
}
Only problem is that I had to place all elements twice in a row so it looks like an infinite scroll...


First you need a wrap div, which its width is three times of your image, so that it can display 3 of your images at a time.
Set the wrap div style: position:relative; overflow:hidden;
Create row div, 10 images in that div, and use 'position:abolute;left:0;' , then you can use css3 transform to move it.


Do you mean something like this?
<marquee behavior="scroll" direction="left" scrollamount="10"><img src="http://www.html.am/images/html-codes/marquees/fish-swimming.gif" width="94" height="88" alt="Swimming fish" /></marquee>
http://jsfiddle.net/mLbkcwmf/

Related

Pages of my webpage positioned on each other

I am creating a website where the homepage has an automatic image slider, I have this issue where the other pages (service page) overlap and stay right on the home page. I tried fixing this issue setting the homepage to 100vh and the image from the service stays right on top.
I tried removing the absolute positioning on the slider and desc and that disfigured the outlook. I tried forcing the code to work by creating a dummy div and setting a height to push down the service page div and it kinda worked but I want my code as clean as possible, I know someone has a better to deal with this please help out.
I also want the images to be positioned next to each as inline and that is not working.
The three pictures you see on the automatic slider are a separate page and I am trying to set to it below the home page (automatic image slider)
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();
function showSlides() {
var slideLength = slides.length;
// Fade in the slide
setTimeout(function(){
if(slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.add("fadeIn");
}, 10);
//Fade out the SLide
setTimeout(function(){
if(slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.remove("fadeIn");
}, 3980);
slideIndex++;
setTimeout(showSlides, 4000);
}
.desc-container {
position: absolute;
bottom: 25%;
left: 23%;
}
.desc {
margin: auto;
width: 450px;
height: 250px;
position: relative;
}
.mySlides {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
top:0;
left:0;
opacity: 0;
}
/*----------------------------------------------------
#Home page
-----------------------------------------------------*/
.main{
width:calc(100%- 300px);
}
.homePage {
overflow: auto;
}
.menu {
text-align: center;
}
.slideshow-container {
margin: auto;
}
.fadeIn {
opacity:1;
}
/*----------------------------------------------------
#Service Page
-----------------------------------------------------*/
div .services {
width:100%;
overflow: auto;
}
.column {
float: left;
width: 350px;
height: auto;
overflow-x: hidden;
padding:10px;
margin-left: 300px;
}
.row {
}
.row:after {
content: "";
clear: both;
display: table;
}
<div class="main">
<section id="homePage">
<div class="homePage">
<div class="slideshow-container">
<div class="mySlides">
<img src="Images/eventbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="greytxt">Luxury Events</h6>
<h1 class="blacktxt">WE CREATE BEAUTIFUL EVENTS</h1>
<p class="greytxt">Join us for a “No Question too Small, Large or Outrageous” Chat about All things Bridal! This is your chance to have two industry experts answer your queries on any topic that is keeping you up at night.</p>
</div>
</div>
</div>
<div class="mySlides">
<img src="Images/restaurantbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="greytxt">Creating Impact</h6>
<h1 class="blacktxt"> STRATEGY AND SALES</h1>
<p class="greytxt"></p>
</div>
</div>
</div>
<div class="mySlides">
<img src="Images/memorialbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="greytxt">Lasting Memories</h6>
<h1 class="blacktxt">SERVING WITH LOVE</h1>
<p class="greytxt"></p>
</div>
</div>
</div>
</div>
</div>
<div>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</section>
<section>
<div class="services">
<div class="row">
<div class="column">
<img src="Images/eventbg2.jpg" alt="" style="width:100%">
</div>
<div class="column">
<img src="Images/restaurantbg2.jpg" alt="" style="width:100%">
</div>
<div class="column">
<img src="Images/memorialbg2.jpg" alt="" style="width:100%">
</div>
</div>
</div>
</section>
</div>

jQuery/CSS semicircle progress bar with different colors

I am new to jQuery and CSS3. I need the following HTML to look like this:
Please help me.
<pre>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>10</span>%
</div>
<div class="progress">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>100</span>%
</div>
<div class="progress">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>34</span>%
</div>
<div class="progress">
<div class="barOverflow">
<div class="bar"></div>
</div>
<span>67</span>%
</div>
</pre>
Block-level HTML elements have a few restrictions:
They must be separated from surrounding text by blank lines.
The begin and end tags of the outermost block element must not be indented.
Markdown can't be used within HTML blocks.

Here it is,
I didn't actually get your question, but here is what I came up with, you can make changes accordingly.
HTML
<div class="circle"></div>
CSS
.circle {
background: transparent;
width: 120px; height: 120px;
border: 12px solid;
border-top-color: blue;
border-right-color: red;
border-bottom-color: green;
border-left-color: yellow;
border-radius: 50%;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg) }
100% { transform: rotate(359deg) }
}
Do add the vendor prefixes for properties such as animation, transform, etc.
Hope it helps!

Jquery - Animation as Slide

Hello I've simple animation car using HTML & CSS & JQuery but I'd like to add some effects, for example I need to stop car wheel rotation after the car come in and run the car wheel rotation when the car started to leave the screen, this was the first Problem.
Second Problem
that I need when the car is come in screen change the car angle (rotate) and reduce the car speed.
and when the car is started to leave the screen, animation the car angle (rotate) and increase the car speed.
Youtube Video
Here my code:
$('.wheelEleContainer .slectWheel').click(function (e) {
e.preventDefault();
var getImgWheel = $(this).find('img').attr('src');
$('.car .car__wheel').css('background-image',
'url(' + getImgWheel + ')'
);
});
var $cars = $('.car');
$('.car-model').on('click', function () {
var $current = $cars.find('.current');
var $next = $current.next();
if ($next.length === 0) $next = $current.prevAll().last();
$current.addClass('car--trans-out');
setTimeout(function () {
$current.removeClass('current').removeClass('car--trans-out');
$next.addClass('current').addClass('car--trans-in');
setTimeout(function () {
$next.removeClass('car--trans-in');
}, 1000)
}, 1000);
})
.car{
height:600px;
padding:40px 0;
background-color:#efefef;
overflow:hidden;
}
.car .click{
width:100%;
padding:10px;
text-align:center;
border:1px solid #0094ff;
margin-bottom:30px;
}
.car-image-container{
position: absolute;
left: 100%;
overflow: hidden;
}
.current{
position: relative;
left: 0;
}
.current .current{
left: 0;
}
.car .car-image .car__wheel{
width:99px;
height:100px;
position:absolute;
background-repeat:no-repeat;
background-position:center center;
}
.car .car-image .car__wheel.left{
background-image:url('http://store6.up-00.com/2017-03/148992740531661.png');
top:94px;
left:98px;
}
.car .car-image .car__wheel.right{
background-image:url('http://store6.up-00.com/2017-03/148992740544512.png');
top:94px;
right:75px;
}
.car--trans-in .car__wheel{
animation: roll-in 400s ease-out;
}
.car--trans-out .car__wheel{
animation: roll-out 400s ease-out;
}
.car--trans-in .car-image{
animation: trans-in 1s ease-out;
}
.car--trans-out .car-image{
animation: trans-out 1s ease-in;
}
.car--trans-in .car__wheel{
animation: roll-in 1s ease-out;
}
.car--trans-out .car__wheel{
animation: roll-out 1s ease-out;
}
.car--trans-in .car-image img{
animation: bounce-in 1s ease-out;
}
.car--trans-out .car-image img{
animation: bounce-out 1s ease-in;
}
#keyframes trans-in {
0% {transform: translateX(100%);}
80% {transform: translateX(0%);}
100% {transform: translateX(0%);}
}
#keyframes trans-out {
0% {transform: translateX(0%);}
10% {transform: translateX(0%);}
80% {transform: translateX(-100%);}
100% {transform: translateX(-100%);}
}
#keyframes roll-in {
0% {transform: rotate(0deg);}
80% {transform: rotate(-720deg);}
100% {transform: rotate(-720deg);}
}
#keyframes roll-out {
0% {transform: rotate(0deg);}
100% {transform: rotate(-720deg);}
}
#keyframes bounce-in {
0% {transform: rotate(2deg);}
70% {transform: rotate(2deg);}
80% {transform: rotate(-1deg);}
90% {transform: rotate(1deg);}
100% {transform: rotate(0deg);}
}
#keyframes bounce-out {
0% {transform: rotate(0deg);}
20% {transform: rotate(2deg);}
100% {transform: rotate(2deg);}
}
.car .wheelEleContainer{
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="car">
<div class="container">
<button>Next</button>
<div class="row">
<div class="car-button-container">
<div class="col-md-2 col-md-offset-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="1">
Car Model 1
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="2">
Car Model 2
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="3">
Car Model 3
</div>
</div>
<div class="col-md-2 col-sm-3 col-xs-6">
<div class="click car-model" data-index="4">
Car Model 4
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div class="col-lg-7 col-lg-offset-2">
<div class="car-image-container current">
<div class="car-image" data-car-index="1">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
<div class="car__wheel left"></div>
<div class="car__wheel right"></div>
</div>
</div>
<div class="car-image-container">
<div class="car-image" data-car-index="2">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727122822.png" alt="" />
<div class="car__wheel left"></div>
<div class="car__wheel right"></div>
</div>
</div>
<div class="car-image-container">
<div class="car-image" data-car-index="3">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727131353.png" alt="" />
<div class="car__wheel left"></div>
<div class="car__wheel right"></div>
</div>
</div>
<div class="car-image-container">
<div class="car-image" data-car-index="4">
<img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727151114.png" alt="" />
<div class="car__wheel left"></div>
<div class="car__wheel right"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="wheelEleContainer">
<div class="col-lg-1 col-lg-offset-2">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740561243.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/14899275127831.png" alt="" />
</div>
</div>
<div class="col-lg-1">
<div class="slectWheel">
<img src="http://store6.up-00.com/2017-03/148992740580684.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Note: please run code snippet in fullscreen

You could use CSS animations to get the car to transition into the frame, another animation to make the car rotate as it is moving.
Take a look at this example jsFiddle I have done.
I am using a html structure like this:
<div class="cars">
<div class="car">
<div class="car__inner">
<div class="car__chassis">
</div>
<div class="car__wheels">
<div class="car__wheel car__wheel--left">
</div>
<div class="car__wheel car__wheel--right">
</div>
</div>
</div>
</div>
...
</div>
Using jQuery I am adding some classes to the <div class="car"> which will allow us to attach CSS animations.
var $cars = $('.cars');
$('button').on('click', function(){
var $active = $cars.find('.car--active');
var $next = $active.next();
if($next.length===0) $next = $active.prevAll().last();
$active.addClass('car--trans-out');
setTimeout(function(){
/*Wait a second before removing the class*/
$active.removeClass('car--active').removeClass('car--trans-out');
$next.addClass('car--active').addClass('car--trans-in');
setTimeout(function(){
$next.removeClass('car--trans-in');
},1000)
},1000);
})
Edit: Here is another jsFiddle which is using the same markup and script as the original post with the addition of some class names and animations

CSS float:left and overflow:visible cutting off text

I'm currently trying to make a color gradient in javascript with numerical values in some of the divs to represent as the scale. However, I've noticed with larger values, the numbers get cut off due to the float:left. I've also tried used display:inline-block, but it seems that has weird positioning and leaves gaps between them. I need the divs flush together, but just have the text overflow ontop of the following div. Is there a way to do this?
Both examples I mentioned are here:
http://jsfiddle.net/y3LTZ/3/
<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
<div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
</div>
and
<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
<div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
<div style="width: 20px;height:100%;float:left;background-color:green;"></div>
<div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
<div style="width: 20px;height:100%;float:left;background-color:green;"></div>
<div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
</div>
Thanks!

DEMO
using inline-block
HTML
<div class="wrapper">
<div class="single-block red">texts</div>
<div class="single-block green"></div>
<div class="single-block red">texts</div>
<div class="single-block green"></div>
<div class="single-block red">texts</div>
</div>
CSS
.wrapper{
width: 600px;
height: 30px;
white-space: nowrap;
font-size:0;
}
.single-block{
width:20px;
height:100%;
display:inline-block;
vertical-align:bottom;
font-size:16px;
}
.red{
background-color:red;
position:relative;
}
.green{
background-color:green;
}

If you want the text overlap the following div, you have to give them position:absolute;
<div style="position: relative; overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
<div class="column" style="background-color:red;">
<div class="textontop">texts</div>
</div>
<div class="column" style="background-color:green;"></div>
<div class="column" style="background-color:red;">
<div class="textontop">texts</div>
</div>
<div class="column" style="background-color:green;"></div>
<div class="column" style="background-color:red;">
<div class="textontop">texts</div>
</div>
</div>
Css:
.column {
width:20px;
height:100%;
overflow: visible;
float:left;
z-index:0;
}
.textontop {
position:absolute;
z-index:999;
}
Jsfiddle:
http://jsfiddle.net/y3LTZ/5/

Horizontal scrolling with sticky div that stays on the left border

I have two rows of data (green) and a header (red), which should be visible at all times:
Check out the example I already have:
http://jsfiddle.net/j9C8R/33/
Now the red header scrolls away together with the content, but it should stick to where it is now, but scroll vertically with the content (MS Excel style).
How can this be achieved (preferably with only CSS).
UPDATE: It is important that the red headers scroll vertically along with the corresponding content but stick to the left edge when scrolling horizontally.
.main {
background-color: blue;
overflow: scroll;
height: 200px;
width: 400px;
}
.row {
height: 50px;
overflow: scroll;
clear: both;
width: 1000px;
background-color: yellow;
}
.sticky,
.content {
float: left;
width: 150px;
border: 1px solid black;
}
.sticky {
background-color: red;
}
.content {
background-color: green;
}
<div class="main">
<div class="row">
<div class="sticky">Sticky header A</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
<div class="content">ContentA</div>
</div>
<div class="row">
<div class="sticky">Sticky header B</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
<div class="content">ContentB</div>
</div>
<div class="row">
<div class="sticky">Sticky header C</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
<div class="content">ContentC</div>
</div>
<div class="row">
<div class="sticky">Sticky header D</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
<div class="content">ContentD</div>
</div>
<div class="row">
<div class="sticky">Sticky header E</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
<div class="content">ContentE</div>
</div>
</div>

UPDATE
please note the below is now a little out of date as we have css position sticky
Original Post
I do not think it is possible to achieve your goal through pure css as items that are sticky usually use position:fixed which unfortunately fixes them relative to the viewport.
with the use of javascript (in this case the jquery library) and absolute positioning, you should be able to achieve what you are after:
$('.main').scroll(function() {
$(this).find('.sticky').css('left', $(this).scrollLeft());
});
.main {
background-color:blue;
overflow:scroll;
height:200px;
width:400px;
}
.row {
height:50px;
overflow:scroll;
clear:both;
width:1000px;
position:relative;
background-color:yellow;
padding-left:150px;
box-sizing:border-box;
}
.sticky, .content {
float:left;
width:150px;
border:1px solid black;
}
.sticky {
background-color:red;
position:absolute; left:0; top:0;
}
.content {
background-color:green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="main">
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
<div class="row">
<div class="sticky">I should stick to the left border</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
<div class="content">Content</div>
</div>
</div>

Ok I've scrapped your thing and have made a complete new one, I've just not wrapped up things inside a position relative container but you can manage to do it atleast
The things are easy for vertical scroll but if you expect horizontal scroll and move headers along, (CSS Wont Just Do It)
Demo
CSS
.head {
background-color: #f00;
width: 300px;
position: absolute;
left: 100px;
}
.head table {
width: 100%;
}
.body {
position: relative;
left: 100px;
top: 20px;
width: 300px;
height: 50px;
overflow-y: auto;
}
.body table {
width: 100%;
}
.body td {
width: 100px;
}
.head table td {
width: 100px;
}
.left {
position: absolute;
background-color: #0f0;
width: 90px;
top: 40px;
}

Categories

Resources