I'm trying to change the position of a button on my React page, but the transform: translate function is not working. I've tried changing the position to absolute, static, fixed, but nothing moves the button.
CSS:
position: absolute;
transform: translate(-600x, 300x);
}
TSX:
<div className="Transform">
<button onClick={clickHandler}>
<img src="https://i.ibb.co/zf3vqPf/imageedit-4-2431153664.png" alt = "Button_image" />
</button>
</div>
Other CSS is working, but translate is not.
transform: translate(-600x, 300x);
Use px , em , rem etc as X is not a unit
transform: translate(-600px , 300px);
Goal —
Smoothly animate a changing list of items.
Problem —
When an item enters the list, everything repositions smoothly. When an item leaves the list, everything snaps abruptly.
I've discovered that .drawer-move is applied when new items enter, but .drawer-move is not applied when items leave.
Docs: https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions
Template —
<transition-group class="utilities -animate" tag="section" name="drawer">
<div class="drawer" key="application-drawer">
<div class="heading">Select An Application</div>
</div>
<div class="drawer" v-if="selectCompanyVisible" key="company-drawer">
<div class="heading">Select A Company</div>
</div>
<div class="drawer" key="manage-drawer">
<div class="heading">Manage {{ user.id }}</div>
</div>
</transition-group>
CSS —
.drawer-enter-active,
.drawer-leave-active,
.drawer-move {
transition-property: opacity, transform;
transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
transition-duration: .4s;
}
.drawer-enter,
.drawer-leave-to {
opacity: 0;
transform: translateX(3rem);
}
The -leave-active transition class must apply a position: absolute declaration, in order to take it out of the layout flow, so the siblings can move in to place around it.
https://forum.vuejs.org/t/transition-group-move-class-not-occuring-in-the-array/6381/4
This also could mean that you should declare positioning within the transition-group element. No one mentions this in the Vue team, but I don't find this applied automatically by the transition classes.
.drawer-leave-active {
position: absolute;
// optional, depends on your layout
left: 0;
width: 100%;
}
.utilities {
position: relative;
}
Hi iv been trying to do some animations for a project in my web development class. I am trying to create the illusion that a car in moving on a street by having the street and some mountains moving horizontally on an endless loop but I also need the photo to repeat. I found how to do this with {background-position} but I can't get the photo to seamlessly scroll without there being a gap any suggestions?
body {
background-color: rgb(59, 193, 236);
}
#Mountains {
transform: translate(-8px, -400px);
animation: slide 2s linear infinite;
}
#keyframes slide {
from {
transform: translate(-8px, -400px);
}
to {
transform: translate(1109px, -400px);
}
}
<div id="Mountains">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1109" height="1500" viewBox="0 0 2100 1500">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""/>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<image y="316" width="2100" height="1184" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAACDQAAASgCAMAAAA63XraAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAC+lBMVEVirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAdirAcAAABEFMKVAAAA/HRSTlMADh4tPExba3iIkpmaqrO7x8zZ3d/u3MGj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AAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAiGgAACKiAQCIiAYAICIaAICIaAAAIqIBAIiIBgAgIhoAgIhoAAAiogEAiIgGACAiGgCAyP8H5b63vEwYaTcAAAAASUVORK5CYII="/>
</svg>
</div>
I haven't though of a solution with only one SVG. But if you can wrap two images (not necessarily the same) in a container, it is easy to make a repeating animation using the animation-delay property for the second image.
See the example:
https://jsfiddle.net/kxo7g714/
.mountains {
position: absolute;
top: 0;
left: 0;
transform: translate(-150px, 50px);
animation: slide 4s linear infinite;
}
.mountains.two {
animation-delay: -2s;
}
If you can use only one image, duplicate it's content inside of the image itself. The example uses different colors to illustrate how the paths are essentially the same.
https://jsfiddle.net/crvpenfo/2/
#keyframes slide {
from {
transform: translate(0, 50px);
}
to {
transform: translate( "NegativeHalfWidth" , 50px);
}
}
Note: This problem can only be seen in IE 11 down. IE Edge (including emulation) will not show the issue.
I'm having a crazy problem when I combined md-tabs with md-sidenav. Here is the plunkr:
http://embed.plnkr.co/if7VqrZoFKBJt4lAAoy0/
<md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Sidenav Right</h1>
</md-toolbar>
<md-content layout-padding="">
<md-tabs>
<md-tab label="Tab #1"></md-tab>
<md-tab label="Tab #2"></md-tab>
<md-tab label="Tab #3"></md-tab>
</md-tabs>
</md-content>
</md-sidenav>
I've duplicated 2 sidenavs: one uses the classmd-sidenav-left and the other uses md-sidenav-right. The right one does not allow for the tabs or any content to be interacted with.
The example and my actual code are using 0.11.4 but I've also tested 1.0 and it has the same issue.
Has anyone run into this issue? The example on the Materials site works just fine but it does not use tabs. I'm thinking it's a translate3d css issue but can't confirm it.
Turns out their css was trying to piggyback on md-sidenav-left instead of creating a new style.
Here is the fixed Plunker:
http://embed.plnkr.co/7L6GuUH036F2W9i7JPwl/
Here is the original SCSS from the build:
.md-sidenav-right {
left: 100%;
top: 0;
transform: translate3d(-100%, 0, 0);
&.md-closed {
transform: translate3d(0%, 0, 0);
}
}
translate3d and left: 100% turned out to be the issue. The reason why it exists though is to create the correct animation.
Here is the corrected SCSS:
.md-sidenav-right {
left: inherit;
right: 0;
transform: translate3d(0,0,0);
&.md-closed {
transform: translate3d(100%,0,0);
}
}
I have a few images on my page. I'm finding that the page starts to render before the images have been loading (which is good), but that the visual effect is not great. Initially the user sees this:
--------hr--------
text
Then a few milliseconds later the page jumps to show this:
--------hr--------
[ ]
[ image ]
[ ]
text
Is there a simple way that I can show a grey background image of exactly the width and height that the image will occupy, until the image itself loads?
The complicating factor is that I don't know the height and width of the images in advance: they are responsive, and just set to width: 100% of the containing div. This is the HTML/CSS:
<div class="thumbnail">
<img src="myimage.jpeg" />
<div class="caption">caption</div>
</div>
img { width: 100% }
Here's a JSFiddle to illustrate the basic problem: http://jsfiddle.net/X8rTB/3/
I've looked into things like LazyLoad, but I can't help feeling there must be a simpler, non-JS answer. Or is the fact that I don't know the height of the image in advance an insurmountable problem? I do know the aspect ratio of the images.
Instead of referencing the image directly, stick it within a DIV, like the following:
<div class="placeholder">
<div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div>
</div>
Then in your CSS:
.placeholder {
width: 300;
height: 300;
background-repeat: no-repeat;
background-size: contain;
background-image: url('my_placeholder.png');
}
Keep in mind - the previous answers that recommend using a div background approach will change the semantic of your image by turning it from an img into a div background. This will result in things like no indexing of these images by a search crawler, delay in loading of these images by the browser (unless you explicitly preload them), etc.
A solution to this issue (while not using the div background approach) is to have a wrapper div to your image and add padding-top to it based on the aspect ratio of the image that you need to know in advance. The below code will work for an image with an aspect ratio of 2:1 (height is 50% of width).
<div style="width:100%;height:0; padding-top:50%;position:relative;">
<img src="<imgUrl>" style="position:absolute; top:0; left:0; width:100%;">
</div>
Of course - the major disadvantage of this approach is that you need to know the aspect ratio of the image in advance.
There is a really simple thing to check before you start looking into lazy-loading and other JavaScript. Make sure the JPEG images you are loading are saved with the 'progressive' option enabled!
This will cause them to load the image iteratively, starting with a placeholder that is low-resolution and faster to download, rather than waiting for the highest resolution data before rendering.
It's very simple...
This scenario allows to load a profile photo that defaults to a placeholder image.
You could load multi CSS background-image into an element. When an avatar photo fails, the placeholder image appears default of div.
If you're using a div element that loads via a CSS background-image, you could use this style:
#avatarImage {
background-image: url("place-holder-image.png"), url("avatar-image.png");
}
<div id="avatarImage"></div>
Feel free to copy this:
<script>
window.addEventListener("load", function () {
document.getElementById('image').style.backgroundColor = 'transparent';
});
</script>
<body>
<image src="example.example.example" alt="example" id="image" style="background-color:blue;">
</body>
I got this from here: Preloader keeps on loading and doesnt disappear when the content is loaded.
Apart from all solutions already mentioned, the last solution would be to hide the document until everything is loaded.
window.addEventListener('load', (e) => {
document.body.classList.add('loaded');
});
body {
opacity: 0;
}
body.loaded {
opacity: 1;
}
<div id="sidebar">
<img src="http://farm9.staticflickr.com/8075/8449869813_1e62a60f01_b.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-1.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-2.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-3.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-4.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-5.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-6.jpg" />
</div>
Or show some animation while everything is loading:
window.addEventListener('load', (e) => {
document.body.classList.add('loaded');
});
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 70px;
height: 70px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
position: absolute;
left: calc(50% - 35px);
top: calc(50% - 35px);
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body :not(.loader) {
opacity: 0;
}
body .loader {
display: block;
}
body.loaded :not(.loader) {
opacity: 1;
}
body.loaded .loader {
display: none;
}
<div class="loader"></div>
<div id="sidebar">
<img src="http://farm9.staticflickr.com/8075/8449869813_1e62a60f01_b.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-1.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-2.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-3.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-4.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-5.jpg" />
<img src="https://www.nla.gov.au/sites/default/files/pic-6.jpg" />
</div>
The only thing I can think of, to minimize the jump effect on your text, is to set min-height to where the image will appear, I would say - set it to the "shorter" image you know of. This way the jump will be less evident and you won't need to use lazyLoad or so... However it doesn't completely fix your problem.
Here's one naive way of doing it,
img {
box-shadow: 0 0 10px 0 rgba(#000, 0.1);
}
You can manipulate the values, but it creates a very light border around the image that doesn't push the contents. Images can load at whatever time they want, and you get a good user experience.
Here is what I did with Tailwind CSS, but it's just CSS:
img {
#apply bg-no-repeat bg-center;
body.locale-en & {
background-image: url("data:image/svg+xml;utf8,<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><text x='50%' y='50%' style='font-family: sans-serif; font-size: 12px;' dominant-baseline='middle' text-anchor='middle'>Loading…</text></svg>");
}
body.locale-fr & {
background-image: url("data:image/svg+xml;utf8,<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><text x='50%' y='50%' style='font-family: sans-serif; font-size: 12px;' dominant-baseline='middle' text-anchor='middle'>Chargement…</text></svg>");
}
}
You can find the width and height of the images in the developer tools console, for example in Chrome you can click the cursor icon in the developer tools console and when you hover on the page it will highlight all the properties of the elements in the page.
This will help you find the width and height of the images, because if you hover on top of your images it will give you the dimensions of the image and other more properties. You can also make an individual div for each image and make the div relative to the images width and height. You can do it like this:
The main div will contain the images and also the background-div which is below the image.
HTML:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class=".mainDiv">
<div class="below"></div>
<img src="https://imgix.bustle.com/uploads/image/2020/2/13/da1a1ca4-95ec-40ea-83c1-4f07fac8b9b7-eqb9xdwx0auhotc.jpg" width="500"/>
</div>
</body>
</html>
CSS:
.mainDiv {
position: relative;
}
.below {
position: absolute;
background: #96a0aa;
width: 500px;
height: 281px;
}
img {
position: absolute;
}
The result will be that .below will be below the image and so when the image has trouble loading the user will instead see the grey .below div. You cannot see the .below div because it is hidden below the image. The only time you will see this is when the loading of the image is delayed. And this will solve all your problems.
I have got a way. But you will need to use JavaScript for it.
The HTML:
img = document.getElementById("img")
text = document.getElementById("text")
document.addEventListener("DOMContentLoaded", () => {
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEWIiIhYZW6zAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC";
text.innerHTML = "Loaded but image is not";
});
window.onload = function() {
img.src = "https://media.geeksforgeeks.org/wp-content/uploads/20190913002133/body-onload-console.png";
text.innerHTML = "Image is now loaded";
};
#img {
width: 400px;
height: 300px;
}
<hr>
<img id="img" src="https://media.geeksforgeeks.org/wp-content/uploads/20190913002133/body-onload-console.png">
<p>Here is the Image</p>
<p id="text">Not Loaded</p>