I am attempting to make a type of interactive slideshow for my website and running into some dead stops in its development. Any direction or assistance on it would be great. The problem I am having is making it responsive.
Here is what im going for: http://adobe.ly/1sRBMLv
I was able to create this initially by using overflow:hidden; on a 4000px wide div within a 800px wide visible section. The links then just repositioned the div to show 1 of 5 different 800px wide sections. This idea ultimately needed to be scrapped as it's not responsive.
Here is my jsfiddle: https://jsfiddle.net/dodgrdg3/1/
So far I have just the basic html and css structure but not the function. Any help would be amazing.
I found the solution with the help of #Serlite pointing me in the right direction. I am treating this as a slideshow now. Here is the Fiddle for it working:
Working Example
One of my changes were changing.....
This:
#a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); }
#a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); }
#a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); }
Became:
#a1:target .pages { left: 0%; }
#a2:target .pages { left: -100%; }
#a3:target .pages { left: -200%; }
Related
I'm practicing CSS animations by making a loading spinner. It's just 4 boxes moving in and out of view. I have it working as intended in VS Code when I just run the .html file. However, when I tried it in an actual angular project with a large data pull, the animation will mess up mid way through.
Posted below is the "blue box", which grows to the right, scaleY toward the bottom, and scaleX toward the left. All the boxes do this same thing, just in different directions with different delays, so there are a total of 16 keyframes in the file. The first loop is usually fine, however, on the second or third, the transform origin of this blue box and another gray box will switch, so the blue box will grow to the left, and the gray box to the right (when it's supposed to be going left). And then the transform origin of the scaleX and scaleY will randomly switch as well (this happens on Firefox, on Chrome or Edge, the animation will just freeze).
I don't get it, is it too much processing power when combined with the data pull?
.boxes .blue-box {
width: $box-width;
height: $box-height;
position: absolute;
background: blue;
left: $blue-left;
top: $blue-top;
transform: scaleX(0) translateZ(0);
opacity: 0;
transform-origin: left;
animation: moveBlue $animation-length infinite;
border: 3px solid rgb(0, 0, 180);
}
#keyframes moveBlue {
13% {
transform: scaleX(1);
opacity: 1;
animation-timing-function: ease-out;
transform-origin: left;
}
51% {
transform: scaleX(1) scaleY(1);
transform-origin: bottom;
}
63% {
transform: scaleX(1) scaleY(0.1);
transform-origin: bottom right;
opacity: 1;
}
75% {
transform: scaleX(0) scaleY(0.1);
transform-origin: bottom right;
animation-timing-function: ease-out;
opacity: 0;
}
}
You should be careful when to display the loader and when to remove it. I have added an example below. call the loader when you are getting results from the api and before you display the results, make suer you clear the loader. In so doing, the loader will not be affected midway data pull.
I have a series of images on-screen in bootstrap 3 panels (3 per row for large screens).
When you click on an image I have it set up so that it applies a CSS class which does a 'scale(2)' on the image, this all works fine, but I want those images to be visible and scale themselves on screen.
Images in column 1 end up slightly off-screen to the left, Images in column 3 end up slightly off-screen to the right, Images in column 2 are for the most part fine.
Ideally I would like them to scale into the centre of the viewport itself, or at least just not render off-screen at all.
CSS:
.zoom {
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.zoom-click {
-ms-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
position:relative;
z-index:100;
border: 2px solid DarkRed;
}
Upon clicking on the image it adds/removes the 'zoom-click' class.
I have tried using 'translate' along with the 'scale' however it is relative to the image itself, have also tried using 'transform-origin'.
**Update: ** Have created a jsfiddle showing how it is at present (minus the knockoutjs code which actually creates each of the 'main-image-panel' panels.
https://jsfiddle.net/tczh1sxq/2/
Figured it out. I always seem to have difficulty at times with the more complex CSS.
Anyway, fixed it by doing:
#images > div .zoom-click { transform-origin: top; }
#images > div:nth-child(3n+0) .zoom-click { transform-origin: top right; }
#images > div:nth-child(3n+1) .zoom-click { transform-origin: top left; }
Be nice if I could get it to actually go into the centre of the viewport, but this will suffice, looks much neater now that it isn't off-screen on the edges.
this might help,
.zoom-click
{
position: absolute;
height: 50%;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
You can use any height/ width you want. If the image is contained within any positioned element, you can use position: fixed and it will still work
Just an idea tried to resolve your issue. I used different tranform-origin based on child element index value as like nth-child,
$('.child').click(function(){
var index = $(this).index()+1;
if((index%3)==1){
$(this).find('img').css({
'transform': 'scale(2)',
'transform-origin': 'top left'
});
}
else if((index%3)==2){
$(this).find('img').css({
'transform': 'scale(2)',
'transform-origin': 'top'
});
}
else if((index%3)==0){
$(this).find('img').css({
'transform': 'scale(2)',
'transform-origin': 'top right'
});
}
});
Find this fiddler for reference.
I'm making a website that contains many skewed elements, like this:
This isn't too bad, there are CSS transforms that could skew it. But how about this:
The image isn't distorted, just the frame is cropped in a skewed way. What's the easiest/best way to do this?
I think this should work for you. As a Mark commented on, clip-path is a nice way to go. There are tools for getting just the right path such as Clippy. Once you've got the path, you drop it right into your code. In my demo, I used it on the div wrapping the image, rather than on the image itself. I did it this way to keep border effects—added via pseudo-class—on top of the image.
Demo: http://codepen.io/antibland/pen/eZKxNa
I ended up using the following. It creates a skewed parent, then unskews the child, centering it and making it big enough to fill the skew's stick-out bits.
HTML
<div class="skewed">
<img src="images/sad-kid.jpg">
</div>
CSS
div.skewed {
position: relative;
height: 140px;
transform: skew(-2deg) rotate(2deg);
-webkit-transform: skew(-2deg) rotate(2deg);
-moz-transform: skew(-2deg) rotate(2deg);
overflow: hidden;
}
div.skewed > * {
width: 110%;
position: absolute;
top: 50%;
transform: skew(2deg) rotate(-2deg) translateY(-50%);
-webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
-moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}
OUTPUT
This is similar to Andy Hoffman's method, but supports a greater number of browsers.
I have been having problems with a Wordpress theme where the portfolio grid doesn't seem to be spanning 100% across the page.
You can find the problem here after the 'crashes' image box - http://beta.audiopeak.net
Any help with amending this issue would be great.
I made these changes to the CSS (screen.css) and it seemed to work (but with limited testing).
Let me know if they work for you.
.one_fourth.gallery4:hover div.thumb_content {
opacity: 1;
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
.one_fourth.gallery4 img{
width: 100%;
}
.page_content_wrapper.full_width {
width: 102%;
}
I have a problem with a webpage I'm working on. On Firefox it doesn't seem to have any problems.
I have 2 elements, horizontal scrolling, with background images and the transition between those 2 is made using CSS3, transformX(). At first these 2 elements overlay (so that you can see the background image of the 2nd element), when you click the right arrow the second element slides from right to left in front. When you click right the first element slides from left to right
When I go back to the first element, the second element flickers, like rearranging its position.
.first-container.first-container1 {
background: transparent url('../img/backgrounds/first1-background.jpg') no-repeat center center;
background-size: cover;
left: 0;
}
.first-container.first-container2 {
background: transparent url('../img/backgrounds/first2-background.jpg') no-repeat center center;
background-size: cover;
left: 100%;
}
.bs-first .first1 .first-container.first-container2 {
-webkit-transform: translateX(-8.5%);
-moz-transform: translateX(-8.5%);
-o-transform: translateX(-8.5%);
-ms-transform: translateX(-8.5%);
transform: translateX(-8.5%);
}
.first2 .first-container.first-container1 {
-webkit-transform: translateX(8.5%);
-moz-transform: translateX(8.5%);
-o-transform: translateX(8.5%);
-ms-transform: translateX(8.5%);
transform: translateX(8.5%);
z-index: 9;
}
I could really use a few hints on how i could solve this. Thank you!
You can try -webkit-backface-visibility: hidden; applied to the element that has applied the css transform.
In your case if you are using background images that it won't work so just create a class and apply it like:
.stop-flickering {-webkit-transform:translate3d(0,0,0);}
Also you can try:
-webkit-transform-style: preserve-3d;
In my case none of these methods worked :
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
I had an animation on an empty div to create bouncing circle and the solution was to use pseudo element :before and the flicker disappeared