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>
Related
i have downloaded an html template and it has a banner after the nav bar, i am trying to replace the image banner with my image, i changed it to the same size of the image in the template and added, the html is like below:
<div class="single-creative-shop-banner parallaxBg bg-img" style="max-width:100%; height:auto;"
data-bg="assets/img/home-banner/home_shop_creative_01.jpg">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="creative-shop-banner-content">
<h2>Minimal Collection</h2>
<p class="mb-0">Unlock The Goddess In You</p>
</div>
</div>
</div>
</div>
</div>
the css is so long , not able to post in the question, my website is https://likhaa.com
the problem is when i am adding the banner image, its not properly displaying, instead some part is hiding under the navbar, and the width is also not proper. is there any code in html to fix it or can anyone help me with my code
Please remove the inline margin of 131px from the div having the class "shop-creative-banner" also remove position fixed from the div which is children of div having id "jarallax-container-0"
I'm using the fullPage.js plugin to develop a project. The plugin works fine, but I have one question:
I have some sliders within a section so as to create vertical scrolling. However, within one slider I have different links that I also want to trigger vertical scrolling in the same way as the plugin does. Here's how my structure looks like:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide">
Example
...
</div>
<div class="slide" id="example"> Slide 3 </div>
</div>
</div>
So, just like I click on the arrows and the different sliders appear, is it possible to click on a link and then a specific slider to appear? The idea is that the Slide 3 will contain content that will change depending on the link that is clicked.
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 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.