Skrollr, Safari, fixed position lags - javascript

I'm playing with parallax at the moment and have an issue:
Here's the markup
<div class="welcome"></div>
<div class="welcome2" data-0="top: 100%;" data-1000="top: 0%;"></div>
<div class="weclome_text">
<h3 data-0="color: rgb(82,98,130);" data-1000="color: rgb(255,255,255);">Hello World</h3>
<div class="scroll-button" data-0="opacity: 1;" data-300="opacity: 0;"></div>
</div>
And CSS:
html,body { margin: 0; padding: 0; font-family: Sans-serif; }
body {
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.welcome { position: fixed; top: 0; width: 100%; height: 100%; background: url(http://justdade.com/t/bg1.png) no-repeat; background-size: cover; }
.welcome2 { position: fixed; top: 100%; width: 100%; height: 100%; background: url(http://justdade.com/t/bg2.png) no-repeat; background-size: cover; }
.weclome_text {
position: fixed; position: fixed; top: 50%; left: 50%; margin-left: -60px; margin-top: -60px; width: 120px; height: 120px; color: #526282;
text-align: center;
}
.scroll-button { background: url(http://justdade.com/t/scroll-button.png); width: 60px; height: 60px; cursor: pointer; margin: 0 auto; }
JSFiddle
Everything seems okay in all browsers expect Safari (Desktop, iOS also okay)
Safari scroll animation is lagging pretty hard after I press "scroll" arrow.
I also noticed that scroll lags starts only if I use position: fixed;
Maybe someone can give me any clue where I should dig?
Thank you.

Okay, so I'm not sure what the problem really was. But after doing lots of googling I found the solution. And it's:
div { -webkit-transform: translateZ(0);-webkit-backface-visibility: hidden;-webkit-perspective: 1000; }
I know It's not the best way. But it fits for me. Apparently this activates hardware acceleration on Safari browser and animation runs like a charm.
I'm also using
data-0="transform: translate(0%,0%)" data-1200="transform: translate(0%, -100%)"
Props to Prinzhorn. Instead of top: 0; top: 100;

Related

How do i bring an elemnt infront of mix blend mode?

Can anyone help me? mix blend is affecting my nav bar and a picture of the shoe. I want to bring them to the front. I tried with z-axis but it doesn't work.
<section>
<img src="slike/bg.jpg" id="bg">
<img src="slike/moon.png" id="moon">
<img src="slike/mountain.png" id="mountain">
<img src="slike/road.png" id="road">
<img src="slike/road.png" id="road">
<img src="slike/Untitled-1.png" id="shoe">
<h1 id="text">AIRMAX</h1>
</section>
section{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
}
section:before{
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #0a2a43, transparent);
z-index: 10000;
}
section:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0a2a43;
z-index: 10000;
mix-blend-mode: color;
}
section img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
#text{
position: relative;
color: #fff;
font-size: 10em;
z-index: 2;
text-align: center;
padding: 100px;
font-family: 'Nunito', sans-serif;
}
#road{
z-index: 2;
}
I made a parallax effect, so I have 5 images stacked on top of each other with mix blend mode. The sixth picture "untitled-1" should be on top of this blend mode. I don't know if this is possible so I came here for help. The blend mode is also affecting my nav bar but the nav bur is outside of the section that has bland mode on it.

DIV "background-image" not stretched over entire DIV when using "background-size : 100% 100%"

On my website I am building a custom HSV Color picker.
Instead of using Gradients I've decided to opt for a .SVG Gradient image that I will use in my HSV Slider.
I am having a problem with the fitting of that Image into the Background of my DIV.
Here's an example.
The Image is fitted perfectly in both Mozilla Firefox and Internet Explorer, but in Edge it looks as if only the "height" is at a "100%", and the "width" is "auto" - Which it is not, at least not in the CSS:
#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('images/pvhue.svg');
background-size: 100% 100%;
background-color: green;
display: flex;
}
How would I go about solving this issue?
Appreciate all the help!
SVG is still buggy in Edge. Therefore, I advise to use old school .png or .jpg images if you don't require a vector image.
Check out the working example:
/* Demo Styles */
.picker {
height: 150px;
width: 200px;
position: relative;
margin: 0 auto;
background-color: #e9e9e9;
}
/* Hue Slider */
#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Hue_alpha.png/900px-Hue_alpha.png');
background-size: 100% 100%;
background-color: white;
display: flex;
}
<div class="picker">
<div id="pvdivsliderhue"></div>
</div>
Make the margins and padding 0
#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('images/pvhue.svg');
background-size: 100% 100%;
background-color: green;
display: flex;
margin :0;
padding :0
}
Try background-size: cover or background-size: container. I hope it will solve your problem.

Creating a boxed/ framed layout

I would like to create a boxed layout, where the boxed / frame stays in place and the content scroll within it. However I don't want to use the old fashioned scrolling frame method, where you have a panel scroll bar on that panel.
I want to achieve something similar to this > https://pixelgrade.com/demos/themes/?product=border - for this purpose, ignore the content, however you can see the white frame/border that stays in place - that is what I want. And the window has the standard scroll bar, not the frame itself.
I guess I might need to use something link sticky-kit.js however apologies if this is a red herring.
Can anyone point me in the right direction for what my search should begin. And before you ask, I have tried to look into this myself :)
The simplest thing I can think of is using some fixed divs along the edges to create a border for your box.
.container {
border: 1px solid red;
width: 100%;
}
.content {
height: 1000px;
background-color: lightblue;
padding: 50px;
}
.top {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
top: 0;
}
.left {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
left: 0;
top: 0;
bottom: 0;
}
.right {
background-color: white;
width: 40px;
position: fixed;
height: 100%;
right: 0;
top: 0;
bottom: 0;
}
.bottom {
background-color: white;
height: 40px;
position: fixed;
width: 100%;
bottom: 0;
}
<section class="container">
<section class="content">
this is my content...
</section>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</section>
Here's the alternative solution which allows the border to be transparent (in order to show a background image). It's a little hack that simply hides the scrollbar of the inner div. I highly recommend that if you choose to use this alternative, to make sure that it is apparent that there is more content on the page since there will be no visible scrollbars.
body,
html {
margin: 0;
padding: 0;
}
.container {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.wrapper {
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
background-color: lightblue;
overflow: hidden;
}
.wrapper2 {
overflow-y: scroll;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-right: -20px;
padding: 20px;
}
.content {
height: 1000px;
}
<div class="container">
<div class="wrapper">
<div class="wrapper2">
<div class="content">
This is my content...
</div>
</div>
</div>
</div>

How to move images slightly up on scroll using Jquery?

I'm trying to create a simple parallax effect using Jquery (without plugins). Basically I have a few different images layered on-top of each-other and need them to move slightly upwards at different speeds when a user scrolls down, similar to a parallax scrolling effect.
Here's the layout so far (excuse the sloppy code):
body {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
background-color: #ededed;
z-index: 4;
display: table;
}
.header {
position: relative;
width: 100%;
background-color: #ffde15;
height: 900px;
margin-left: auto;
margin-right: auto;
}
.headertopimg {
position: absolute;
width: 100%;
z-index: 10;
}
.headerbehindimg {
position: absolute;
width: 100%;
z-index: 9;
top:0%;
}
.headerbehindbehindimg {
position: absolute;
width: 100%;
z-index: 8;
margin-top: 8%;
}
.headerbgimg {
position: absolute;
width: 70%;
z-index: 7;
left: 50%;
margin-left: -35%;
}
<body>
<div class="header">
<div class="headertop"><img src="http://i.imgur.com/z2DORfA.png" class="headertopimg"> </div>
<div class="headerbehind"><img src="http://i.imgur.com/o1Yl0PD.png" class="headerbehindimg"></div>
<div class="headerbehindbehind"><img src="http://i.imgur.com/VQxs9LD.png" class="headerbehindbehindimg"></div>
<div class="headerbg"><img src="http://i.imgur.com/t5fTRZe.png" class="headerbgimg"></div>
</div>
</body>
Any help would be much appreciated!

Horizontally fix background image to logo in header

my problem is quite simple. I need the diagonal line in the background image to align with the "X" in the logo and make it stay there no matter how wide the viewport is. I tried to achieve it with css only but with no result. It´s gonna need some javascript I suppose but I have no idea where to start.
<body>
<header>
<div class="container">
<svg class="logo"></svg>
</div>
</header>
</body>
* {
box-sizing: border-box
}
body {
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
header {
opacity: 1;
height: 135px;
line-height:135px;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 5;
transition: all 0.3s;
z-index: 1000;
text-align: center;
}
.container {
width: 100%;
max-width: 1200px;
line-height: 135px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
padding: 0 80px;
}
.logo {
max-width: 200px;
float: left;
}
http://codepen.io/easynowbaby/pen/qdLbgP
Thanks!
looks like what you want is to play around with the background position, try something like this,
background: url(http://mujtest.tk/ci/site/templates/img/hero2.jpg) no-repeat center -110px;

Categories