So I have looked at jquery hover and this is all well and great but how can I use a list into this? The example that the previous user uses is all image backgrounds.
Im not sure if the is in the right place.
<div class="backdrop">
<ul id="year"></ul>
<div class="direction left"></div>
<div class="direction right"></div>
jsfiddle
Since I could not change background position on <ul><li> I decided to use margin here if my solution.
Related
I just implemented imageScroll.js on my website and for the images in between my paragraphs it works fine. When entering the website I would like to have the first image with the parallax effect as well. The images are either loaded via the data-image html tag or via image option (JS).
When I set the image as "background", I think the image is fix and the parallax effect can't be applied. But when I load the image into a div, as I do it with the other two images in between my paragraphs, it shifts the menu as well as the welcome text below.
I tried to realize it with z-index, but couldn't make it run yet.
Does anyone of you have an idea for me how I could make this happen?
Thanks a lot in advance!
Eric
I didn't see the wood for the trees. Just had to put everything inside the div from the parallax:
<div class="img-holder" data-image="../images/other/home-min.jpg" data-image-mobile="../images/other/home-min.jpg">
<!-- Home Page -->
<div id="home" class="container-fluid">
<div class="row">
<nav class="navigation">
<div class="col-md-3"><a class="navigation" href="#about">About</a></div>
<div class="col-md-3"><a class="navigation" href="#portfolio">Portfolio</a></div>
<div class="col-md-3"><a class="navigation" href="#contact">Contact</a></div>
<div class="col-md-3"><a class="navigation" href="#blog"></a></div>
</nav>
</div>
<div id="welcome" class="row">Welcome</div> <!--Welcome Text-->
</div>
</div>
maybe someone else is also confused and perceive this as helpful.
Cheers
Eric
I'm looking to a way to design my website a bit like this one that is inspirating to me : https://flink.to/
My research is more about the way the articles are showing up in a mosaic of squares of two different sizes.
I tried :
Masonry horizontal (http://isotope.metafizzy.co/layout-modes/masonryhorizontal.html) but it doesn't really work in responsive as we can't assign a width and a height in percentage... I'm looking for a solution to display squares in that way.
CSS with Flex direction, but It's not as powerful as it could be : if I have three rows of squares and a very-first-big square, more-little squares don't fill the empty space above the big one.
How could I replicate this in the best way ?
I have found Pure CSS and CSS Skeleton to be really simple and easy to use libraries for responsive grids in CSS.
Here is an example of a similar layout using pure.css
In Pure CSS grids are laid out like this:
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
And in CSS Skeleton like this:
<div class="container">
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
So I've been working on a site that uses a JavaScript animation for the background of some of the sections. Right now, the section in question is broken down like this:
<section id="intro">
<div class="info">
<div class="container">
<div class="row">
<div class="col-full"><h1>My Name</h1></div>
</div>
<div class="row"><div class="col-1-4 centered line"></div></div>
<div class="row">
<div class="col-full"><h4>Video<span class="cool">s</span> and stuff</h4></div>
</div>
</div>
</div>
<nav id="nav">
<!-- The content between <span> </span> tags will be hidden on mobile version -->
<ul class="clearfix">
<li>Pro<span>file</span></li>
<li>Ski<span>lls</span></li>
<li>Exp<span>erience</span></li>
<li>Edu<span>cation</span></li>
<li>Por<span>tfolio</span></li>
<li>Con<span>tact</span></li>
</ul>
</nav>
</section>
Originally, I wanted to set the background of the entire section using
dataUrl = canvas.toDataURL();
document.getElementById("intro")[0].style.background='url('+dataUrl+')'
but that didn't work, so I ended up going with
dataUrl = canvas.toDataURL();
document.getElementsByClassName("info")[0].style.background='url('+dataUrl+')'
which did. However, the Nav bar scrolls with the page as you move down, and as soon as the script for scrolling it down kicks in, the background reverts to its default blue color.
My first thought was to simply add
document.getElementById("nav")[0].style.background='url('+dataUrl+')'
but that didn't work. I had some success with
document.getElementByClassName("clearfix")[0].style.background='url('+dataUrl+')'
but only the area immediately surrounding the text used the animated background; the rest was still blue.
So I'm not sure if it's some issue with getElementById, or if you can't use style.background with <section> and <nav>.
Anyone have any thoughts?
I dont think you need the array selector with getElementById so try it on the whole section again and see if that will fix it for you.
So do document.getElementById("intro").style.background='url('+dataUrl+')'
I have a div inside which I have placed images of many languages. The total size of the div goes above the page size in a browser. So I want the images to keep moving from bottom to top like animation slider. Image size is not what I am looking to change. I just want the images to keep moving from bottom to top. At the end of this website http://www.veepal.com/ there is a div that has images of different programming languages which keep sliding. I want similar functionality. Is it possible??
<div id="languagesRow" style="position: absolute;top:5px;">
<div id="l1"><img class="messagesOne" src="images/languages/English.png"></div>
<div id="l2"><img class="messagesOne" src="images/languages/French.png"></div>
<div id="l3"><img class="messagesOne" src="images/languages/Russian.png"></div>
<div id="l4"><img class="messagesOne" src="images/languages/Chinese.png"></div>
<div id="l5"><img class="messagesOne" src="images/languages/Korean.png"></div>
<div id="l6"><img class="messagesOne" src="images/languages/Hindi.png"></div>
</div>
I dont know what can be used more optimally to achieve this kind of animation so I am tagging jquery, javascript and css in this post.
Well you can use marquee for this:
http://jsfiddle.net/ZB2Fc/
<div class='flags'>
<MARQUEE BEHAVIOR='SCROLL' HEIGHT='25' WIDTH='300' BGColor='yellow' scrollamount="1" onmouseover="this.stop();" onmouseout="this.start();">
<div id="l1">English</div>
<div id="l2">French </div>
<div id="l3">Russian </div>
<div id="l4">Chinese </div>
</MARQUEE>
</div>
CSS Marquee is one option : http://jsfiddle.net/FbKW9/
<marquee behavior="scroll" direction="up" >//item</marquee>
My goal is to expand the .sort width and show all content in the .sort-expand div. This is expanding to the right with the .sort expanding from 200px when "more" is clicked to 400px. And, when clicked again, to shrink.
<div class="sort">
<div class="mainimg"></div>
<div class="infoarea">
<h3>Main Name</h3>
<p>Title of position</p>
<p><span class="floatl">Tag01, Tag02</span><span class="floatr">more</span></p>
</div>
<div class="sort-expand">
<div class="votes"></div>
<div class="full-info"></div>
<div class="other"></div>
</div>
</div>
This also needs to push all the other .sort areas so it doesn't overlap them. Any ideas? I will post what I've started with but having a hard time. Thanks so much.
You should be able to use jQuery's .slideDown(). .slideDown() will push the other elements as it animates downwards and shows the content of the div. Call it on the div you want: $("#myDiv").slideDown() If you want it to shrink when clicked again, use .slideToggle()