I've been reading other posts about having horizontal scroll, but I haven't been able to do it. I took a web design class a very long time ago at my local community college, and all that was taught was basic HTML. I haven't been up to date with the latest web technology, which is why I'm considering to stop working for a singer in Los Angeles. I have tried reading tutorials, and looking at websites and looking/importing the code into Dreamweaver to see if I can understand it, but it's been hard.
Right now I was asked to have the news as just a thumbnail, but with horizontal scrolling. Right now I have the news appear in an iframe, but scrolling with a mouse is not even possible. It's also very hard to use the finger on a mobile device. What would be the best way to have something like apple.com in a simple html page? Something like just having the dots, and moving to the next page?
This is the news page of the page I work in: http://www.maria-del-pilar.com/main.html and this is the the page that loads within the iframe: http://www.maria-del-pilar.com/news.html
What do you guys recommend I should do? What would be the easiest way to scroll horizontally?
You will probably not want to hear this, but you will not make horizontal scrolling any better than what you have now without adding some javascript.
Great things can be achieved with jQuery - you will probably have to learn something new in order to use it, but hey - life is about learning, isn't it?
Also, after you learn just basics of jQuery, you will be able to use solution of somebody else and not necessarily write all code by yourself. Like this - http://www.jquery4u.com/plugins/10-jquery-horizonal-scroll-demos-plugins/
You can also abandon idea of horizontal scrolling whatsoever - I don't think it is anything special in terms of usability or design anyway. But I understand that you want to achieve what you were asked for.
Good luck
Related
I've been struggling at work to figure this out for a week and can't quite figure it out and none of my friends know HTML/CSS so I thought why not ask here? I work on my company’s internal website, it's kinda crap none of the apps work. They have a carousel that we don't much care for that I'm trying to get rid of so I was going to make a new one... only issue is the site doesn't allow any scripts or java so I'm really just limited to basic html and css and I can't for the life of me figure out how to animations to work. I've figured out how to make a carousel by researching online that's fine that seems pretty straight forward, animating photos on their own seems straightforward... but trying to make an animation with any kind of control without java or scripts of any kind I can't figure it out. Was hoping someone could help me make a super basic one even if it's just a general image rotator with a hover to pause, but preferably something that rotates automatically and has navigation arrows or page dots...
I found this as something that might work for our site, but I need to reach out to our provider to find out why our host site is replacing the ">" between ".st-slider > #play1:checked" with garbage text preventing me from seeing if this animation will actually work (It should since there are no scripts running it and other keyanimation based css sliders work on our site). Then I would like it to look better... But to give an idea of what kind of project I'm looking at please see the link below.
https://codepen.io/miriamcc/pen/KzGGqZ
enter code here
Hello dear did you try to use
#keyframes
?
that would do the automated part of the work
I have recently started to see websites with full size, full width background images, and when you scroll down there comes a section with some content and then a different background. and that scrolls with the page. I am sure if you have seen it you know what I am talking about.
How do you call this technique? Is there a name for it? I would like to look for a tutorial on this, but I don't know what to look for.
Thanks!
I think u are looking for Parallax Scrolling Website.
There are many tutorials for doing that easily.
A simple example for that is given here.
Moe can be found-
http://webdesign.tutsplus.com/articles/web-design-inspiration-scrollin-scrollin-scrollin--cms-25486
http://webdesign.tutsplus.com/tutorials/how-to-give-your-logo-the-slip-scroll-effect--cms-22274
http://webdesign.tutsplus.com/tutorials/create-a-masked-background-effect-with-css--cms-21112
http://webdesign.tutsplus.com/articles/building-a-complete-website-with-the-gumby-framework--webdesign-16980
http://webdesign.tutsplus.com/articles/working-with-gumbys-parallax-extension--webdesign-16967
http://webdesign.tutsplus.com/tutorials/jazz-up-a-static-webpage-with-subtle-parallax--webdesign-10195
http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellarjs--webdesign-7307
http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641
If u like to implement Parallax with Twitter Bootstrap, then this tutorial is for u-
https://www.impulse-themes.com/zenith/development/twitter-bootstrap-parallax-scrolling
Think u have your complete answer.
Are you perhaps looking for Parallax? There are many resources online with instructions about it, hopefully knowing the term will get you there.
Here's a simple demo with pure CSS Parallax, but you could also check out Awwwards for some inspiration.
The term “parallax” first came from the visual effect of 2D side scrolling videogames that used different background image movement speeds to create the illusion of depth during gameplay. This was generally done by making the background of the game move slower than the foreground in order to make it seem further away. This same concept applies to parallax site design in which the background of the website moves at a different speed as the rest of the page for an impressive visual effect that allows for countless creative applications for online storytelling.
You can check the link below for more information, tips and some downsides as well.
See More
I'm looking for a way to implement some animation on the background on a page when the user scrolls down a page. Think of ... maybe a divided sphere which get closer when the user scrolls down the page and get departed on a scroll up.
I thought of using SVG in combination of JS, but maybe some of you know better ways to implement that kind of stuff.
Maybe some of you already coded that kind of animation?
PS: I don't want to use Flash etc., just HTML5 and existing frameworks.
I found some frameworks, plugins that do exactly I was looking for and I don't want to hold them back. Here are the links:
Scrollorama
Scrolldeck, Parallax
Have a nice day! :)
Sy
I'm working on my html project, and everything is going well.
Now I'm doing the same project with framesets, but I discovered that the page in a frame set won't scroll as a whole page (you can only scroll each frame at a time).
How can i solve this?
Please help
It sounds like what you want is perhaps a static design around your scrolling content, correct?
If so, what you should actually do is make a single page (not a frameset) with your desired DIV layout (a good example can be found here), and then have your content div use CSS that will allow it to scroll (e.g. overflow:scroll;).
Hope this helps.
Don't use frames! I know this is a horrible answer to your question, but believe me - loads of peeps would agree!
If you can, use plain ol' CSS and NO FRAMES.
Also, there is rogue synchronised scrolling Javascripts floating around on the Interwebs - But I wouldn't use them. People who have Javascript off won't get that effect.
I'm currently teaching myself to create websites - this particular site is for a that business I have. I'm using Dreamweaver CS3 to do so.
I need some help with the horizontal navigation menu I am trying to create. I have three main categories within my website, each with their own small image to represent them. I want to have all three images, side by side underneath my company logo, acting as the navigational menu.
So for example, one section is Alcohol. When the user puts their mouse over the 'alcohol' image, a menu drops down underneath to show the subsections eg spirits, beer etc.
After doing some research, I can't quite decide the best way to do this. Whilst learning Dreamweaver, I have come across Spry Menus, which I thought would do the job. But I have also now learned about pop-up menus in Fireworks CS3 (which I also have available to me).
I'm really looking for some other opinions on the matter and would appreciate any recommendations about the best route to take with this.
Thanks.
I would prefer learning CSS menus instead of having it generated using Dreamweaver. You can try the this one.
I would learn pure CSS menus, and then for more advanced functionality, use jQuery plugins like Superfish
The site I first learned CSS menus from was CSSplay. This same guy also has a newer site aimed only at CSS menus.
I would say going though the source code of some of those will teach you a lot, but ultimately I would recommend using Superfish or some other jQuery plugin for more user-friendly menus, especially for delay on mouseout. A lack of mouseout delay can render most CSS menus completely unusable.
Give http://www.alistapart.com/ a try. Wonderful page with a lot of good tutorials. http://www.alistapart.com/articles/horizdropdowns/ for example shows you how to use a list and css to build a horizontal menu. Maybe a good starting point for you project.
Dreamweaver is really a good tool for getting fast results. But if you are interested in learning implementing websites than it is better to get your hands dirty. Take for example the tutorials from http://www.w3schools.com/ and a good editor of your choice and build your website or a fun project from the scratch. On the long run this investment will pay of.
First, don't use snippets built in dreamweaver. They are awful.
Use JavaScript, maybe even JS framework like jQuery. It offers toggle() function for that kind of situations.
In general, you should apply JS function to mouseover of your image. That function shows or hides div (your dropdown). You can achieve that by setting css parameter display: none (hidden) or display: block (visible).
Example for showing div:
My menu 1
<div id="menu-1">
<ul>
<li>Alcohol</li>
<li>Spirit</li>
</ul>
</div>
And some javascript:
function show(myid)
{
document.getElementById(myid).style.display = "block";
}
function hide(myid)
{
document.getElementById(myid).style.display = "none";
}
I made that in a hurry so it's not perfect.