So Im a graphic desinger and I've been asked to develop a concept for a client's new site. Its a micro-site with limited amounts of content. The idea I have come up with is to place all the sections of the site on divs and then rotate them like a wheel when a user clicks a menu link. What I need to find out is this: Is it possible to rotate entire divs containing normal content around a central pivot point using html5? The rotation needs to be animated the content contained in each rotated div needs to rotate in unison with its container div. If it is possible, how?
I've googled it and found examples of rotating stuff with CSS3 and I've seen html5 transformations but Im not sure I have seen anything this sophisticated before and I can't find any examples to work off. So Im a little concerned its not actually possible for some reason. Im also open to using something like javascript to make this happen.
You can do something like this:
HTML
<div class="container">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
</div>
CSS
.container {
transition: transform 1s;
transform: rotate(0);
position: relative;
}
.container>div {
position: absolute;
}
.container.second {
transform: rotate(120deg);
}
.container.third {
transform: rotate(240deg);
}
.container .first {
bottom: 0;
right: 0;
transform: rotate(120deg);
}
.container .second {
left: 0;
right: 0;
transform: rotate(240deg);
}
You can add some simple js to change the container current class.
Related
How I can take any given webpage and make everything look tinted a certain color. Basically, if you take google and tint it orange, it should look something like this:
The way that I have been trying to accomplish this is by adding a div at the VERY END of a webpage's body tag. Basically, this is what I do:
<head>
stuff that goes in head...
</head>
<body>
all the content of the webpage...
<div style="position:fixed;height:100%;width:100%;
left:0px;top:0px;opacity: 0.5;">
<div style="height:100%;width:100%;position:static;
background-color:orange"></div>
</div>
</body>
Unfortunately, what happens when you do this in Google looks like this:
As you can see, the top bar of Google's webpage is not impacted by the tint in this second picture. This is just one example of my code not working, the chat conversations nor the header bar of facebook gets tinted by my code. I'm sure there are plenty of cases where my code does not completely tint the whole page. I am not sure if adding a div to webpages is the right way or maybe I should just try something with javascript. If it isn't clear, I want to be able to tint the webpage in the browser, NOT by screen capturing it and editing the image in a program as I have done with the first image.
In the end, what I need for my project is to be able to manipulate the visual output of a webpage in many strange ways (stretch the page, dim it, blur it, make it look fisheye, make it shake like the screen is shaking, etc.). Essentially, I want to learn how to have as much control over a webpage as possible. Even if you can't help me achieve this, if you can help me with the current issue of tinting the webpage in any way, I would appreciate it.
You need a few more css styles:
position: fixed; /* keeps the screen covered durning scroll */
z-index: 100000; /* puts it on top of everything */
top: 0;
left: 0;
opacity: .3; /* so we can see through it */
pointer-events: none; /* so we can click through it */
Update
Regarding the last part of your question, you should be applying classes to <body> Then you dont have to insert divs.
For example, here's a way to do the tint by just adding tint class to the <body> tag
.tint:after {
content: '';
position: fixed;
z-index: 100000;
top: 0;
left: 0;
opacity: .3;
pointer-events: none;
background: orange;
width: 100%;
height: 100%;
}
.tint.dim:after {
background: black;
opacity: .6;
}
For animations, check out Animate.css
You need z-index in your case, since some of its elements have their z-index specified.
Mine works great with,
.oranged {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: orange;
opacity: 0.4;
z-index: 1000;
}
<div class="oranged"> </div>
Or on-the-fly..
<div style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: orange;z-index: 1000;opacity: 0.4;"></div>
I am trying to develop a notification plugin. I have following code
javascript
function notification () {
var wrapper = document.createElement('div'),
docFrag = document.createDocumentFragment();
wrapper.textContent = 'Default text';
wrapper.classList.add('notif');
docFrag.appendChild(wrapper);
document.body.appendChild(docFrag);
var a = window.getComputedStyle(wrapper).height;
wrapper.classList.add('animated');
}
CSS
body {
background: #e2e2e2;
}
.notif {
position: absolute;
padding: 20px;
background: #fff;
display: block;
width: 160px;
margin-bottom: 10px;
opacity: 0;
-webkit-transform: translate3d(0%, -50%);
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.animated {
opacity: 1;
-webkit-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
When the notification () is called a new notification should be added. When a new notification is being added if already a notification is existing, the existing notification should be animated and pushed down and the new notification should position on top of it. And the notification should be absolutely positioned. But with my code the divs stack upon each other and those do not flow from top to bottom. How can i achieve this.
Here is the working with code: DEMO Please run notification() to see the issue.
here is what i want to develop: Required look
EDIT
It has to be absolutely , or fixed positioned because the notification should not affect the other content of the webpage.
The notifications seem to stack on top of one another because you assigned their position as absolute. If you set their display attribute to block and do not set their position attribute to absolute, you won't have to worry about this. You can still set the position attribute of the container of these notifications to absolute if you wish to free it from positioning relative to the rest of the DOM.
The appendChild() method inserts the element inside the container-element at the end. Try using docFrag.insertBefore(wrapper, docFrag.firstChild);.
It will not work because absolutley positioned elements stay in the specified place. What you could do instead is absolutley position the container and append your divs inside that. Divs as block elements will naturally push themselves down.
Hope this helps
You can do it in a crazy way:
add a wrapper for notification block (notif-wrapper);
each new block (also wrapped with notif-wrapper) insert before all blocks into deepest notification wrapper $newNotifWrapper.insertBefore(jQuery('.nofit-wrapper .notif').last()) and add css .notif .notif {top: 0; left: 0;}
each new notif-wrapper after displaying should animate its height
But obviously, simplier and better way is create a single wrapper for all your notifications, add it once on first notification coming and insert all those new notifications before first child of this wrapper, animating their height, ofcourse.
The reason why they're stack on top of eachother is because they're absolutely positioned. You can use the method here to fix your issue.
Summary of the article:
When positioning elements absolutely their bounding box is by default the body.
However, when you add the absolutely positioned element to a relatively positioned element, the bounding box of the absolutely positioned element will change to the relatively positioned elements space.
The HTML would look something like:
<relative-element>
<absolute-element>
<!-- Content -->
</absolute-element>
</relative-element>
With CSS that would look something like:
relative-element {
position: relative;
}
absolute-element {
position: absolute;
}
Applying the article to your problem
Create a container and position it relatively.
Add another container to it and position it absolutely. (This will hold your notifications)
Add children to the last container and they will stack like you want them to.
I'm developing an cordova app with 3 "pages". The "pages" are divs with a fixed height and the with of 100%. (see div1, div2, div3 in the picture)
I'm currently using jquery show and hide functions with a slide but the performance on mobile phones is very bad. So I thought of using css, I cant get an idea of how to make is so you can swipe the current visible div to sort of snap the next div in place.
Maybe this picture wil clear my story up: picture
I hope someone can push me in the right direction css and javascript wise..
You should still use jQuery Mobile to detect swipe left/right events on each div, but instead of animating div's position, you should add/remove class for the previous/active/next DIV. Classes should look something like this:
.container {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100vh;
transition: all 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940); // this will add nice inertia effect upon switching DIVs
}
.container.previous {
transform: translateX(-100%);
}
.container.active {
transform: translateX(0%);
}
.container.next {
transform: translateX(-100%);
}
I have been looking around the internet for a while to find a good library or way of making a mobile full width/height div
And when I click a button it swipes to the right revealing another div
with new content, and pushing the current div to the left ( or right )
The blue box is my viewport, mobile in this case
Here's a crappy illustration to show what I mean
I have tried using CSS ( with semi-success ) I can reveal another div using
.slide {
position: absolute;
width: 100%;
height: 100%;
transition: transform .5s ease-in-out;
}
#slide-options {
background: #eee;
transform: translate(100%, 0);
}
#slide-options.active {
transform: translate(0,0);
}
But it's just sliding over the 1st div, not pushing it along
Any idea's or existing libraries?
Thank you!
Can anyone point me in the right direction of a JS library or alike with regards to creating the water/bubble effect on this Apple webpage.
I think it could have been done with a combination of parallax but the 'particles' appear as if they are a looping video rather than reacting to scrolling of the page.
The image below maybe a little too small, but it depicts what I am trying to accomplish.
There are a bunch of different parallax libraries out there (this is decent). Regarding the bubble effect, this is actually achieved pretty simply using this image and some CSS (no JavaScript required!). This jsFiddle has only the dust particles so you can see how it's put together.
The div has a class of .dust which positions it absolutely and sorts the layout:
.dust {
position:absolute; top:0; left:0;
width:100%; height:100%;
background-size:50% auto;
background-position:center center;
transform-origin:bottom center;
}
Then there are .dust-small and .dust-medium, which have the aforementioned background image, and some CSS animations applied. One such animation used:
#keyframes dustSmallAnim {
0% { opacity:0; transform:translate3d(-2%,0,0) scale(1.025); }
12.5% { opacity:0.4; transform:translate3d(-1.5%,0,0) scale(1.025); }
25% { opacity:0.75; transform:translate3d(-1%,0,0) scale(1.05); }
37.5% { opacity:0.4; transform:translate3d(-.5%,0,0) scale(1.075); }
50% { opacity:0.2; transform:translate3d(0,0,0) scale(1.1); }
62.5% { opacity:0.4; transform:translate3d(.5%,0,0) scale(1.125); }
75% { opacity:0.75; transform:translate3d(1%,0,0) scale(1.15); }
87.5% { opacity:0.4; transform:translate3d(1.5%,0,0) scale(1.175); }
100% { opacity:0; transform:translate3d(2%,0,0) scale(1.2); }
}
So, fairly simple CSS, and older browsers just fall back to a static background image. You should be able to play around with the general idea to achieve the effect you want.
I've left out vendor prefixes for this example, but you'll obviously need those.
check this out
you can always place the div where you want to and set the necessary fields in the script like count and size of the bubble.