New volcano site - Post ID 283007

User 2040390 Photo


Registered User
95 posts

This is close to what I plan to put on my site which is now one of the "websites that suck."

http://pppotscom.coffeecup.com/index.html

It has some additional pages, (not cones) each of which has a menu but only "Home" works to return to index. Navigation is scrolling down through "Info-containers," each with a picture and an explanatory paragraph.

I have seen sites that have something like this but the top of the image freezes at the top of the screen while the text scrolls to its end and the next image rises up to the top of the screen. I would like to do this but don't know how.

Without Inger, this wouldn't be here. She made my menus. Many thanks to a wonderful lady.
User 2699991 Photo


Registered User
4,782 posts
Online Now

Stonecherub wrote:
This is close to what I plan to put on my site which is now one of the "websites that suck."

http://pppotscom.coffeecup.com/index.html

It has some additional pages, (not cones) each of which has a menu but only "Home" works to return to index. Navigation is scrolling down through "Info-containers," each with a picture and an explanatory paragraph.

I have seen sites that have something like this but the top of the image freezes at the top of the screen while the text scrolls to its end and the next image rises up to the top of the screen. I would like to do this but don't know how.

Without Inger, this wouldn't be here. She made my menus. Many thanks to a wonderful lady.


Are the images "Background Images?

If so then in design view you set the background image setting for attachment to "fixed"

If the images are not background images then you go to the layout pane, down to "position & set it to fixed again (you will probably have to mess about with top/left/right margins to get them to sit where you want them to be
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

The images are not background images. They can be made into that, though. The effect with fixed images and scrolling text is something that goes by the name of 'parallax effect', although it is not quite parallax. Usually also the images are set to scroll for mobile devices, but for desktops and laptops it can be done.
Stonecherub has a lot of text below most of the images, so I'm not sure if it will look good. It would be a bit hard to change to this with all the contents in situ, it's better to start over. I'm just preparing to go away and travel for two days, but at the end of the week I could try to change it.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2040390 Photo


Registered User
95 posts

Well, there's my problem. I have a lot of pictures. Some field days, I would bring back 600 or more, and that was before I got the drone! I have the object - some lava structure or an unusual crater - and I have one or more photographs of that object and a description of that object - what, how, why, when. The website is to present those objects to the user (geologists and other people who care about volcanoes), I'm not selling anything to anybody.

But, I'm playing games with myself, here in my back room full of computers. Are the pictures too big? Do I have too many words or not enough? Does the scrolling get to be boring? You aren't geologists like I'm not a developer but you do give me the advice of people who know what they are doing with web development and I appreciate that.

Once I post this to pinacate.org, I expect to change it every couple of days.
User 2699991 Photo


Registered User
4,782 posts
Online Now

Stonecherub wrote:
Well, there's my problem. I have a lot of pictures. Some field days, I would bring back 600 or more, and that was before I got the drone! I have the object - some lava structure or an unusual crater - and I have one or more photographs of that object and a description of that object - what, how, why, when. The website is to present those objects to the user (geologists and other people who care about volcanoes), I'm not selling anything to anybody.

But, I'm playing games with myself, here in my back room full of computers. Are the pictures too big? Do I have too many words or not enough? Does the scrolling get to be boring? You aren't geologists like I'm not a developer but you do give me the advice of people who know what they are doing with web development and I appreciate that.

Once I post this to pinacate.org, I expect to change it every couple of days.



Hi Stonecherub,
First off is maybe you should consider making your site a little more like an article (blog type) style. y that I mean have the first (main/landing) page as your latest presentation (from the; ; latest field trip, then have your previous articles (existing pages more like archived (you could have a fixed sidebar on the landing page with a list of the archives (linked to the pages.

You could make a template for the landing page, which then for your latest presentation you just fill in the blanks so to speak. (you could adapt this template to add/take away stuff if you don't need it.)
This template would hold all previous templates as exported files in your "resources" folder, that way when you create new one all you have to do is populate the new template as you desire, & add another link in the sidebar to the archived pages
That may sound very complicated but it isn't really, & considering you will be thinking of updating the site every few days it really would be much simpler to do,

As far as too much scrolling/etc too long, images too big, that's totally up yo you really, in my humble opinion, just a few choice images per landing page with quality content (words in between) would make the pages more reasonable even for those who are not geologists, but are interested in that sort of stuff, additional images could be presented as thumbnails with a link to the larger images in a gallery type presentation page, for those that may wish to look at more than on the presentation landing page.

As for your paragraphs/text, you need to consider that the human eye when reading lines of text tends to skip around if the line is too wide (long) which they are a tad too wide at the moment especially on large screens, you should consider setting the maximum width for the paragraphs to around 1100px to 1200px give the paragraphs a bit of padding left/right say 5px and center the paragraphs by setting the left/right margins to "auto" this will take care of the laptop/desktop viewport width and help stop the reader's eyes from skipping about.

Finally, I know you want the header & other stuff to be on the narrow side, but once again you need to consider the people visiting your site rather than what you want or think is best. The actual hamburger thing for your menu needs to be more prominent & visible, it is not exactly clear at the moment, & some of your visitors won't spend too long looking for it (even if they are interested in volcanoes, & lets face it a few more pixels in height, for pages that are that long isn't going to make much difference.

Anyway that's my humble opinion & food for thought.
Wayan

Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Some good thoughts there, Wayan!
As to thumbnail images, I made an image gallery with thumbnails some years ago with Bootstrap, that was pre the CC responsive site builders. I may be able to brush the dust off it and recreate it with Foundation.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
4,782 posts
Online Now

Inger wrote:
Some good thoughts there, Wayan!
As to thumbnail images, I made an image gallery with thumbnails some years ago with Bootstrap, that was pre the CC responsive site builders. I may be able to brush the dust off it and recreate it with Foundation.


easy enough to do Inger
i have done quite a few now using thumbnails & modal-window made to look like lightbox
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

I am not sure I explained the idea well enough, so I have made an example for you to see, ITS JUST AN IDEA of what can be achieved.

The site opens as normal,
The hamburger menu thingy has been given a little bit of extra size and moved a tad away from your page title heading

On the top bar is an additional button "My Field Trips" when you open that there are links to Your Latest Field Trip (which is the one you would update from the template) THIS ONE WORKS SO TAKE A LOOK.
the field trip page has been set to appear with a zoom transition, so it gives the impression that the page is opening from underneath your main page
at the bottom of the page is a "go back" button which takes your visitors back to the main site page (rather than them using the browsers back button

There are more links to "Archived field trips" (THESE DON'T WORK AT THE MOMENT, but would contain your older field trips which because they are made from a template would look and have the same style as "Your Latest Field Trip"

The background images are fixed so that the other content scrolls over.,
the paragraph text has been set to a comfortable width for your visitors to read at high-end size.

you can take a looksee here

https://demo.rsdtutorials.com

Don't take too long though because even I have put a no index no follow instruction, browsers don't always obey that, so I will take the example down in a couple of days.

I am sure Inger can emulate something similar also should you wish to try this idea for your new site

I forgot to mention that I haven' put the full page images, just a few to show as an example & the hamburger menu thing doesn't work either (it's just a sample)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2040390 Photo


Registered User
95 posts

Wayan:

Thank you for your suggestions, they are great, as usual. Alas, what you made is the exact opposite of what I visualize. Your image shows up full screen, probably as background, but the caption scrolls up to COVER it. My ideal, which may not be possible, is to have the caption scroll up UNDER the image because the image is the most important thing. I would like my user to be able to look up from the text and see what I'm describing.

The best example of this is the second picture showing the full field from space. The text is in three paragraphs and the lowest one describes the giant craters that are so obvious in the image - obvious to ME. Did you notice them? Would someone completely unfamiliar with Pinacate see them if they were looking at the whole field for the first time? Pointed out by the text, the ARE obvious.

My current build scrolls the image out of view so that either the text OR the craters are in the viewport, not both. Reducing the browser width makes the image shorter but the text longer - same-same. To see them after reading about them, the user must scroll back. In my dream, the image captures the upper viewport with text below it that scrolls up to disappear under the picture. I'm probably asking too much of the software (and of you). Now that I've seen your suggestion, you can take it down.

I also understand what you are doing with "My field trips," a much larger and more prominent "Hey look! Here's the MENU!" icon than the understated three line that not everybody may know means "menu." Although, that icon is used by the New York Times and theAtlantic Magazine, general readership websites.

I'm not sure what you mean by "the blog-type style," can you give me a link to an example. I picked the Times and Atlantic photo page as my foundation because ... well, because I'm not very creative.

I just need to get this damned website up.
User 2040390 Photo


Registered User
95 posts

"Share your websites …" is probably not the right place to continue this discussion but I don't see a structure to smoothly move it to another thread.

Sergey Losev is doing what I want to do in his travel website posted this morning. Here is another example from the New York Times:
https://www.nytimes.com/interactive/201 … n=Trending

In both pages, images load as background and text scrolls across them in transparent boxes. I'm going to try to figure this out but asking somebody who knows (absent a manual) is much more efficient.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.