I'm trying to create a loading page and I thought while the page loads i'd give a little instruction to how the page worked.
See this image
Firstly is this possible in css, I think not but i'm amazed at what you can do in css now and secondly, can it be animated slightly maybe a shimmer of light going from left to right and back again?
Related
I have the following problem. There is delay in displaying photos in fading mode. When the animation starts the photo is not shown right away, but with delay. When animation passes to the next slide (second, third), a few seconds before it displays the image i see the background. It look like it was loading it with delay. But even when image is preloaded, issue can still repeats when I reload the page.
After passing all the slides once, the animation is smooth until reload the page. The picture is high resolution (about 1800px) because it's supposed to be something like hero slider.
Please Help!
OK, looks like nobody is going to answer my question. So I will answer it myself because someone may have a similar problem and use it a bit.
After many hours of messing with it, it turns out that replacing the method of inserting photos into img from background-image solves the problem. Thus, it can be assumed that the problem is in the very construction of the carousel. Don't use background-img to place images into divs. Use classic img with src.
If you want to have pictures fitting into the div like a cover option in bg-img mode, then for img you can add an object-fit: cover entry in css. That resolves problem.
I'm trying to write a sliding menu similar to that with images here: https://chustynka.pl/
I've got already components that are changing in time (with arrows) the only thing left is animation. I added the classes and ids that will be useful but I don't know how to use css to animate them. Could you help?
https://codesandbox.io/s/00rnj29p60
Unfortunately it's not just CSS code you need. As you're going to animate the slides you have to do some more javascript code as well. For example you have to keep track of the direction of the slides. That is if you're pressing the left or right arrow. That, in turn, will decide which direction the slides will slide in/out.
There's a lot of approaches to doing this but it involves more coding in JS. =)
This is not a React slider I've made here but you can download/clone it from Github and take a look at the script for it. Maybe it will give you some idea of what you have to do.
https://github.com/weibenfalk/Slider-Carousel---Lightweight-in-Vanilla-JS-ES6-
I have been working on something based on brad frost's Off Canvas Fullscreen Overlay responsive design pattern.
However for some reason the transition only runs when clicking on the list item (the overlay slides in from the right) but not when you then click on the back button (it is suppose to slide back out). I can't understand why it isn't working when a user closes the overlay. The JS that effects the class of the elements seems to be working correctly.
I've created a codepen so people can see what is happening. http://codepen.io/colmjude/pen/fBnrI
Any ideas? Thanks.
Goal: when someone clicks on the logo on my website it appears to be "pushed" by changing the image to a different one with a stronger inner shadow or to one that has a top padding of a few pixels.
I've been reading boards on here and trying tutorial after tutorial to get this to work yet am still having issues. Where I'm at now is going back to very simple code... no extra CSS... no javascript, but am finding that I probably will have to use one or both of those. Right now (with very basic html and no CSS or JS) I am finding that when my logo is clicked on the 2nd image appears but is BEHIND the first. The first image doesn't go away and I can only see the test image glowing behind it when clicked on (probably because I'm using 'background-image' but it's the only way I've been able to see any kind of change).
<div class="logo"><img src="images/logo.png" onmousedown="this.style.cssText='background-image: url(images/logo-click.png)'" onmouseup="this.style.cssText='background-image: url(images/logo.png)'" /></div>
CSS I can handle but my knowledge of JS is limited so if this has to involve JS please point me to a template or tutorial. I have found tons of tutorials about how to create this effect from scratch in CSS but I can't do that with my logo as it is an image.
It seems like it should be simple to show one main image, click on it to show a different one, and let go of your click to show the original with no fancy smooth transition effects. Yet... I am struggling with this.
If you want to obtain the change only when the mouse is being clicked you could use the :active element of CSS.
I haven't tested the following code but I think it should work:
a {
background-image: url(images/logo.png)
}
a:active {
background-image: url(images/click.png)
}
This is very strange and I'm pretty sure it's to do with some sort of width issue in CSS, but as you start to re-size the browser, it adds this strange gap to the right (Which is off screen).
Here is the page in question
I've tried looking through the CSS and I can't exactly find anything, I keep going over and over it but it's not sticking out to me.
The website is WordPress driven, so most of the CSS is in theme.css and lessframework.css. The Sidebar is a fixed width at 202px and the Content is next to it, which has different width sizes based on what screen size. I'm pretty sure it's something to do with that but I just need a second opinion/set of eyes!
Can anybody help?
I hope im not bringing an old question back to life, but i find Firefox's developer tools have been invaluable in ascertaining, on-the-fly, what elements are actually displaying.
The easiest way is to right click on the area in question, and choose the last option 'Inspect Element'. This will open up the source and CSS console and displays the elements current id/class and style.
To go one better, once the console is open, click on the 3D box icon on the right of the console bar to make Firefox render the page in 3D, which will allow you to spin and zoom in on the affected area.