Overlay an animated div on top of a JavaScript animated canvas - javascript

I recently found a codepen with some JavaScript which creates a cool looking node effect: http://codepen.io/thetwistedtaste/pen/GgrWLp
as well as this 'glitch' effect on text using #keyframes animation:
http://codepen.io/anon/pen/YyjLJZ
I wanted to implement both on my practice website but I'm finding it hard to place the text on top of the canvas with the animation.
Here is what I have at the moment:
http://codepen.io/anon/pen/EVeVvE
What I want to achieve is the 'TEXT' to be in the centre with the glitch animation as well as the moving nodes in the background.
Is this possible?
I've tried adding a z-index to the wrap class but I don't think I'm using it correctly.
Here's what it looks like:
margin: 0 auto;
text-align: center;
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
Do I need to add a z-index to every frame of the animation? Would anyone be able to help me out with this please?
Without using the z-index, the animation works fine but the text appears at the bottom of the page which is where I don't want it to be.

This works in the latest versions of Safari and Chrome, however the clip property is deprecated and may not work in certain browsers. clip-path should be used instead, and it will need vendor prefixes. See this CodePen for a demo.

Related

css3 transform not rendering properly on chrome (works on firefox)

I have a div, on which I am applying css3 transform to make it look 3d & these transforms change as per the mousewheel events.
First look at the div (the brown board with dots) in normal state:
Now I apply this small css code to transform it!
.board-class{
transform-style: preserve-3d;
transform-origin: center top;
transform: translateY(0) rotateX(30deg);
}
you can guess what this code will do, right? But it does not work in expected way, this is how it renders on chrome:
But on Firefox this work well without issue:
Here is link to hosted site : http://www.buildactivityboard.com/how-it-works
Can anyone guide me what I am doing wrong, this seems like a silly issue but I can't find out what I am doing wrong.
Note:
Believe me, this used to work without issue on Chrome too! I don't know what happened now to cause this problem. I've checked this on Mac & Windows, behaviour remains same!
Changing the position from static to absolute fixes the issue:
.master-board .widget-board {
width: 750px;
height: 300px;
padding: 0;
position: absolute;
left: 50vw;
top: 50vh;
margin: -96px 0 0 -375px;
z-index: 1000;
transition: all 1.5s;
}
https://bugs.chromium.org/p/chromium/issues/detail?id=20574
Either adding perspective: 1000px to body or .master-board works.
EDIT: According to this post, seems like it's caused by a conflict between 3d transforms and position:fixed. The chromium bug tracker marked this issue as "wont fix".
I've created a fiddle to reproduce this issue:
https://jsfiddle.net/uuhqsw57/
Adding perspective to its nearest parent helped solve the issue.

featherlight.js - possible to use it together with img-zoom WITHIN the lightbox?

I´ve been trying (and searching) since days, but didn´t got my idea work...
I use the featherlight lightbox to display HTML content (text with some images). Because of some pics are very small, i´d like to have an image-zoom on them.
Example of the zoom here: jquery.elevatezoom.js #6:inner-zoom
The elevatezoom.js works well outside the lightbox, but unfortunately not inside. Did/does anyone get this working together? Or do I need another javascript(?) I tried several.. Thanks for help!
The problem seems to be in the way the ElevateZoom plugin is calculating the position and dimensions of the image.
If you do try to put a picture inside the featherlight hidden div, you'll see that ElevateZoom does create a zoomContainer and everything is working, except this is its generated css:
left: 0px;
top: 0px;
height: 0px;
width: 0px;
This seems to happen because when you call $('#image_element').offset() it returns {top:0,left:0} I assume because when it's inside the featherlight container, its position is fixed.
I think the easiest way to fix this, if you haven't already found another image zooming library, is to just make this effect yourself. You would simple have two divs in the featherlight container, one hidden containing the larger picture, and one smaller containing the normal picture. When the mouse enters the picture, you hide the small and show the big. That would be the first step.
The second step is making it scroll. The way elevateZoom handles this is by setting the background-image to the large image, and moving it around using the background-position attribute. Here's what the elevateZoom generates as an example:
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; width: 411px; height: 274px; float: left; cursor: crosshair; position: absolute; top: 0px; left: 0px; display: block; opacity: 0; background-image: url("images/large/image1.jpg"); background-position: -152.651px -545.577px; background-repeat: no-repeat;" class="zoomWindow"> </div>
Notice the background-image and background-repeat. You can move that around with Javascript as the cursor moves relative to where the image is positioned.
I hope this helps!

Slowly removing blur on background image after page loads

So, using html, css, javascript, I am looking for a way to have it so that my page will load with the background image blurred. Then, after the whole page loads, the image slowly goes from being fully blurred to being not blurred at all. Not an instant blur to crisp, but I nice transformation.
Not sure if I would have to have a blurred picture and one thats not and just somehow switch the pictures slowly? Any tips would help.
Blurring sounds like a nice job for Canvas.
Maybe have a look at http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
You can put your canvas page-wide on your screen with something like:
canvas{
position: absolute;
top: 0px;
z-index: 0px;
}
Then draw your background-picture blurry (have a look at the hyperlink) on it, and use setInterval or something like that in order to unblur it gradually.
I managed to be able to blur the background-image using a CSS hack. Usually, I would just set the opacity property of a container, but that would effect everything in the container. What I did instead was use the :before pseudoclass to toggle only the background-image.
#myContainer {
height: 400px;
width: 400px;
position: relative;
overflow: hidden;
}
#myContainer:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.1;
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRCFyJhwDi5ud74pENDaCIuggegz89q6Odhke5IEo7vEKwjewDxsQ);
}
h1 {
color: blue;
}
http://jsfiddle.net/59zutyLd/1/
https://css-tricks.com/snippets/css/transparent-background-images/
To remove the blur, you could use the jQuery animate property for something like this
$("#myContainer:before").animate({opacity: "1.0"}, 2000)
Unfortunately, pseudoclasses are not part of the DOM, so they can't be used in jQuery.
Keep the background_div with position:relative
Create a overlay div inside that and keep it as position:absolute, opacity:0.5, full width, full height.
Apply fadeout effect on overlay div
I hope it will the expected output.
Try the demo here:
[1] https://jsfiddle.net/fnwL8ozg/3/
Correct me if I'm wrong but what you are looking for is "Blur Up" technique described here: https://css-tricks.com/the-blur-up-technique-for-loading-background-images/
TLDR:
You create very small size copy of original picture
You load that first and add Gaussian blur overlay so it doesn't seem bad
On download complete with basic JavaScript you change pic with original
Add transition to blur none and profit

CSS - Android browsers scrolling too much

so I made this tiny little page. www.farley.cz
It's using jQuery's load function to switch content in div. That's the whole functionality.
Now, the idea is that this containing div is in the middle of the screen. I've used the negative margin method.
#mydiv {
position:relative;
top: 50%;
left: 50%;
width: 880px;
height: 476px;
margin-top: -238px;
margin-left: -440px;
}
I'm happy how it looks on desktop, but on Andoid, it behaves strangely. I'm experiencing scroll drifts (link highlight drawn outside of image), strange little jumps as I'm zooming in and zooming out. ...and when I flip the phone horizontally, the div scrolls down out of the picture.
is there away to fix this? Or should I find a better method for such a centering?
Kind regards,
Martin.

Scrolling div tags on touch?

Ok, I have got a number div tags, within a section tag and on selected menu button clicks scrolls though to that selected div area.
Each div area has a translate3d css, move each div out one other the other. Then the code fires on a 'click' event to move the div tag into the browser window.
CSS code
#Area1 {
position: absolute;
top: 0px;
z-index: 10;
border-left:10px solid #FFFFFF;
width: 100%;
height: 100%;
padding-left: 10%;
padding-right: 10%;
background-color: #66cc33;
-moz-transform:translate3d(100%,0%,0px) skew(16deg, 0);
-webkit-transform: translate3d(100%,0%,0px) skew(16deg, 0);
}
Area2 code would be the same, but set at 200%. This div tag is set within a div wrapper set with position relative on it.
Jquery code the moves the div
$( "#AreaOne" ).animate({left: "0%"}, 1000, 'easeInOutQuad');
$( "#AreaTwo" ).delay(100).animate({left: "0%"}, 1000, 'easeInOutQuad');
This all works fine. No problems at all. But I want to be able to swipe through these divs as well. But is does not do this on my iphone I am testing on. Now I think this is because I use an click event function? I don't really want to change the code I have made, mainly because it works fine.
Now I tried using touchwipe on the div, but that did not work, not sure if I call it in right or not :).
Just wanted to know if there was a quick a simple way of making a div scroll on touch?
Many thanks,
Glenn.
PS. Sorry if I have not explained myself well. If its not clear, please let me know and I will change my question.
Have you tried adding the web-kit specific declaration?
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch; /* momentum scrolling, iOS Safari only*/
More depth here: http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
Also see the documentation for -webkit-overflow-scrolling.

Categories

Resources