I'm trying to recreate a animation / side scroll effect. The effect is from https://elrond.com/#partners and its located in the partner section. The slow moving circles. I tried to recreate it, but after slamming my head against mine desk for the duration of the weekend I couldn't recreate it. So here I'm asking for some help.
I made a little code pen to show where I'm at now.
.slide-wrapper{
max-width: 800px;
height: 30vh;
position: relative;
margin: 0 auto;
transform: translate3d(0,0,0);
outline: red;
}
.slider{
position: absolute;
top: 0;
left: 0;
height: 200px;
display:flex;
transform: translate3d(0,0,0);
animation: scroll 15s infinite linear;
}
.slider:last-child .slide{
background-color: steelblue;
animation: scroll 13s infinite linear;
margin-top: 5rem;
}
.slide{
background-color:orangered;
height:50px;
width:50px;
margin: 1rem 6rem;
}
#keyframes scroll {
100%{transform: translateX(-66.6666%)}
}
https://codepen.io/tijmenjacobs/pen/LYxrvKq
My main questions are the following:
How can I loop the animation? Now when the animation is done it teleports back to its original position and restarts.
I was wondering how to position the circles. Should I handle JS to random assign the circles or should I hard code the location? Like they seem to do on the original.
Hope you guys could help!
Thanks in advance!
To get the desired effect you need two of the same sliders next to eachother (slider-main and slider-copy in the snippet).
I used CSS variables to make it easier to calculate offsets and whitespace. The offset between the slides is based on the amount per row (--slides-per-row). These are set within the HTML so you can easily reuse the slider somewhere else.
/* Basic reset */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body > * + * {
margin-top: 2em;
}
/* Slider styling */
.sliders {
display: flex;
}
.slider {
--slide-offset: calc(100vw / var(--slides-per-row, 4)); /* --slides-per-row is set via HTML and uses 4 if nothing is provided */
--slide-size: 5rem;
flex: 0 0 100vw;
animation: scroll 10s linear infinite;
}
.slider-row {
display: flex;
}
/* Offset every odd row */
.slider-row:nth-child(2n+1) {
transform: translateX(
calc((var(--slide-offset) / 2 + var(--slide-size) / 2) * -1)
);
margin-bottom: 2rem;
}
.slide {
width: var(--slide-size);
height: var(--slide-size);
margin: 0 0 0 var(--slide-offset);
background: steelblue;
font-size: 2rem;
color: white;
/* Center content */
display: flex;
align-items: center;
justify-content: center;
}
#keyframes scroll {
100% {
transform: translateX(-100%);
}
}
<h2>4 slides per row</h2>
<div class='sliders' style='--slides-per-row: 4'>
<div class='slider slider-main'>
<div class='slider-row'>
<div class='slide'>1</div>
<div class='slide'>2</div>
<div class='slide'>3</div>
<div class='slide'>4</div>
</div>
<div class='slider-row'>
<div class='slide'>5</div>
<div class='slide'>6</div>
<div class='slide'>7</div>
<div class='slide'>8</div>
</div>
</div>
<div class='slider slider-copy'>
<div class='slider-row'>
<div class='slide'>1</div>
<div class='slide'>2</div>
<div class='slide'>3</div>
<div class='slide'>4</div>
</div>
<div class='slider-row'>
<div class='slide'>5</div>
<div class='slide'>6</div>
<div class='slide'>7</div>
<div class='slide'>8</div>
</div>
</div>
</div>
<h2>2 slides per row</h2>
<div class='sliders' style='--slides-per-row: 2'>
<div class='slider slider-main'>
<div class='slider-row'>
<div class='slide'>1</div>
<div class='slide'>2</div>
</div>
<div class='slider-row'>
<div class='slide'>3</div>
<div class='slide'>4</div>
</div>
<div class='slider-row'>
<div class='slide'>5</div>
<div class='slide'>6</div>
</div>
<div class='slider-row'>
<div class='slide'>7</div>
<div class='slide'>8</div>
</div>
</div>
<div class='slider slider-copy'>
<div class='slider-row'>
<div class='slide'>1</div>
<div class='slide'>2</div>
</div>
<div class='slider-row'>
<div class='slide'>3</div>
<div class='slide'>4</div>
</div>
<div class='slider-row'>
<div class='slide'>5</div>
<div class='slide'>6</div>
</div>
<div class='slider-row'>
<div class='slide'>7</div>
<div class='slide'>8</div>
</div>
</div>
</div>
Related
I have a flip card where i have put an iframe on the flip side and i want to prevent the front view from scrolling the iframe before resuming normal scroll process. how can I achieve this with JavaScript ?
Prevent from scrolling iframe in flip front for mobile device on touch scroll. Css solution didn't work and now I would like some JavaScript that can help me achieve this for every .flip-box-front
fieldset {
height:200px;}
.card {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
border:0.5px solid #72bcd4;
border-radius:12px;
padding: 2px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #fff;
color: black;
}
.flip-box-back {transform: rotateY(180deg);}
.flip-box-back iframe {
border: 0px none;
frame-border: 0px ;
margin-height: 0px;
}
.card.is-flipped {transform: rotateY(180deg);}
<fieldset>
<legend>header title </legend>
<div class="card">
<div class="flip-box-front">
<h2> title text</h2>
<p> some write up</p>
<p> some write up</p>
<p> some write up</p>
</div>
<div class="flip-box-back">
<iframe src="https://ee-3.blogspot.com">
</iframe>
</div>
</div>
</div>
</fieldset>
<br/>
<fieldset>
<legend>header title </legend>
<div class="card">
<div class="flip-box-front">
<h2> title text</h2>
<p> some write up</p>
<p> some write up</p>
<p> some write up</p>
</div>
<div class="flip-box-back">
<iframe src="https://ee-3.blogspot.com">
</iframe>
</div>
</fieldset>
var cards = document.querySelectorAll('.card');
cards.forEach(card => {
card.addEventListener('click', function() {
card.classList.toggle('is-flipped');
});
})
Adding a z-index to .flip-box-front solved this problem.
.flip-box-front {
background-color: #fff;
color: black;
z-index: 2;
}
SITUATION:
I have the following result for my Website:
PROBLEM:
I would like to add content on top of the iPad image so that the content is always "inside" the iPad's screen (even when resizing the window).
QUESTION:
How can achieve that ? I googled for solutions, none helped me. Is there some property to make a div snap to an image ?
CODE:
HTML:
<section class="Contact" id="Contact">
<div class="row">
<div class="col span-1-of-2" >
<h2> Contact </h2>
</div>
<div class="col span-1-of-2 rightPage" >
<img src="Vendors/Images/iPadContact.png" alt="Contact on iPad">
</div>
</div>
</section>
CSS:
section {
height: 100vh;
overflow: hidden;
padding: 0%;
}
.rightPage {
margin-top: 0%;
height: 100vh;
width: 50vh;
}
img {
max-width: 100%;
max-height: 95%;
display: block;
margin-top: 2.5%;
margin-bottom: 2.5%;
margin-left: 0;
}
From what I understood you whant the text inside the iPad image. If that is the case try to set you'r image as background-image :
<section class="Contact" id="Contact">
<div class="row">
<div class="col span-1-of-2" >
<h2> Contact </h2>
</div>
<div class="col span-1-of-2 rightPage" >
Some Text ...
</div>
</div>
</section>
CSS.
.rightPage {
background-image: url("Vendors/Images/iPadContact.png");
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
max-width: 517px;
}
Add the right image width to max-width
I am creating an admin panel with charts/images, etc.
I am failing to make it responsive.
All images are svg's, I used charts.js framework to create the pie chart.
This is an example of a div I have
This is the html:
<div class="row">
<div class="col-md-6">
<div class="alerts-chart-wrapper">
<canvas id="alertsChart" style="float: left;"></canvas>
</div>
</div>
<div class="col-md-6">
<div class="row alert-row">
<div class="entitys-icons icon-1"> </div>
<div class="alert-entity-name"> Users </div>
<div class="entity-alerts-count">28</div>
</div>
...(3 more rows)
</div>
</div>
The css:
.alert-row {
padding: 0% 15% 3% 5%;
}
.entitys-icons {
background: url('/Areas/WebApp/app/main_page_assets/02_general_alerts_icons.svg');
background-repeat: no-repeat;
width: 33px;
height: 33px;
background-size: 77px;
float: left;
}
.entitys-icons.icon-1 {
background-position: 0 2px;
}
.alert-entity-name {
float: left;
font-size: 0.75em;
vertical-align: middle;
line-height: 35px;
padding-left: 2px;
}
.entity-alerts-count {
float: right;
vertical-align: middle;
line-height: 35px;
padding-left: 2px;
}
.alerts-chart-wrapper {
width: 100%;
}
Now the problem is the circle grows and shrinks depending on the resolution, but the rows arent.
Here is a screenshot of the problem when the width shrinks(the circle and th rows must be aligned):
What is the strategy to use here? I thought maybe i will use media's with fixed size, but the best solution for me is that the rows height will change accordingly.
Inside the head tag, configure the right viewport
<meta name="viewport" content="width=device-width,minimum-scale=1>
You have to use the other grid options to specify the sizes as the screen changes resolution.
http://getbootstrap.com/css/#grid
For mobile you'll want to use the .col-sm- prefix.
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="alerts-chart-wrapper">
<canvas id="alertsChart" style="float: left;"></canvas>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-sm-6 alert-row">
<div class="entitys-icons icon-1"> </div>
<div class="alert-entity-name"> Users </div>
<div class="entity-alerts-count">28</div>
</div>
...(3 more **col**)
</div>
</div>
</div>
I have four boxes that are displayed in a single row (in a larger viewport). The boxes then fadeIn will going up the page. My issue is I cannot figure out how to get these boxes to go up the page without affecting the parent div and the sections of code below it (#contact-social). I want the other to divs to stay in their finished place that they are supposed to be in (after the boxes have went up the page).
How can I only change the positioning of the boxes as they go up the page without affecting anything else?
The position I have in my
function contactBox() {
$('.contact-connect-box').delay(600).animate({
'opacity' : 1,
'margin' : "0px 20px"
}, 800);
};
contactBox();
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
.contact-connect-box {
width: 22%;
margin: 60px 20px 0 20px;
display: inline-block;
border: 1px solid black;
vertical-align: top;
opacity: 0;
}
#contact-social {
width: 100%;
height: 200px;
background: #F5F5F5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contact-connect">
<div class="contact-connect-box">
<h2 class="contact-connect-title">fda</h2>
<div class="contact-connect-description">fdsaf</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdsa</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">fdsaf</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fdsaf
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdf</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">fds</div>
<div class="contact-connect-link">fdsfe</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
<div id="contact-social">
</div>
To prevent other elements move - making a margin top smaller, you should also increase the bottom margin respectively...
Or, instead of animating the margin, add a CSS class that will transition your styles :
function contactBox() {
$('.contact-connect-box').addClass("fadeShow");
};
setTimeout(contactBox, 600);
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
.contact-connect-box {
width: 22%;
margin: 60px 20px 0 20px;
display: inline-block;
border: 1px solid black;
vertical-align: top;
opacity: 0;
transition:2s; -webkit-transition:2s; /* ADD THIS */
}
.contact-connect-box.fadeShow{ /* AND ALL OF THIS */
opacity:1;
transform:translateY(-30px); -webkit-transform:translateY(-30px);
}
#contact-social {
height: 200px;
background: #F5F5F5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contact-connect">
<div class="contact-connect-box">
<h2 class="contact-connect-title">fda</h2>
<div class="contact-connect-description">fdsaf</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdsa</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">fdsaf</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fdsaf
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdf</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">fds</div>
<div class="contact-connect-link">fdsfe</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
<div id="contact-social">
</div>
Please refer this fiddle here to understand the problem I'm trying to explain. I want such a layout wherein divs will utilize all the available space. There are 8 divs here which are resizable. When I minimize divs A and B, an empty space is seen below these divs. I want divs D and E to occupy that empty space.
How can I achieve this? There are some jQuery plugins available like gridstack out there but their resizing feature is somewhat different. Without using any available jQuery plugin, is it possible to achieve mentioned effect? If you have any useful resources please share. Thanks in advance.
Edit
One solution could be to have 3 columns in .container but this solution might not work if div is resized horizontally.
Change your div structure to the following I think that will help you.
$(document).ready(function() {
$('.tile').resizable({
handles: 'e, s, se',
containment: '.container'
});
});
.tile
{
height: 180px;
width: 100%;
float: left;
background-color: rgb(232, 232, 232);
border: 1px solid red;
margin: 0% 0% 3% 0%;
min-height: 20px;
max-height: 360px;
max-width: 540px;
min-width: 180px;
text-align: centre
}
.verticalspace{
width:180px;
float:left;
margin: 0% 0% 0% 1%;
}
.container{
overflow: hidden
}
<div class="container">
<div class= "verticalspace">
<div class="tile">A</div>
<div class="tile">E</div>
</div>
<div class= "verticalspace">
<div class="tile">B</div>
<div class="tile">F</div>
</div>
<div class= "verticalspace">
<div class="tile">C</div>
<div class="tile">G</div>
</div>
<div class= "verticalspace">
<div class="tile">D</div>
<div class="tile">H</div>
</div>
</div>
this kind of structure will stay close even if somediv above it is collapsed also
You could try a 3 col solution (And use javascript to properly order the items in each column):
.col {
background: whitesmoke;
width: 165px;
float: left;
}
.item {
height: 150px;
width: 150px;
margin: auto;
background: grey;
margin-top: 15px;
}
.custom {
height: 265px;
}
.custom2 {
height: 30px;
}
<div class="container">
<div class="col">
<div class="item"></div>
<div class="item custom"></div>
<div class="item"></div>
</div>
<div class="col">
<div class="item"></div>
<div class="item custom2"></div>
<div class="item"></div>
</div>
<div class="col">
<div class="item custom2"></div>
<div class="item"></div>
<div class="item custom"></div>
</div>
</div>