#fullpage.js

[fromdevcom]

With Google’s mobile-friendly update, responsive web designs have become a crucial ranking factor. Due to this update, several coveted companies worldwide have started to adopt a responsive design for their business websites. With the advent of various web-based development tools like HTML5, CSS3, Bootstrap, Jquery, and others, creating responsive web design are not an uphill task anymore. Among several such tools, jQuery is the crucial one that enables designers to create responsive layouts. It is something that makes web pages livelier. With the aid of Jquery plugins, you can revive navigation, sliders, images, carousels, calendars, and other components of your website. Today, there are a plethora of Jquery plugins are available that you can use to transform your site into a responsive one. If you are looking for some Jquery plugins to revive your website, then this blog may prove useful for you. ANIMSITION ANIMSITION is a simple yet powerful plugin. When it comes to adding page transitions with CSS animations, developers use this plugin a lot as it provides a wide choice of 58 different animations whether it is fade-in, fade-out, rotate, zoom, overlay, and a lot more. Browser Support (CSS3): IE 10+, Safari, Chrome, Firefox.  anoFlow anoFlow is a lightweight, responsive lightbox plugin. It is a perfect choice for mobile development that is available free for personal and commercial use.  Brick Work Brick Work is a lightweight (15kb) full-featured plugin that are extensively used for creating responsive, dynamic layouts. Further, it supports almost all the browsers like chrome, opera, safari, IE 8.0+, Firefox.  Data-Img Data-Img is a simple yet reliable plugin that deals with responsive image delivery. It just replaces images from ‘background-image URL’ or ‘image src’ depending on screen width. FitText By using FitText, a featured-rich plugin, you can make the font sizes of your web page flexible. This plugin helps developers and designers to achieve scalable headlines for the websites. FitVids.JS A website that lacks interactivity will be worthless to design. Use FitVids.JS plugin that allows designers and developers to embed fluid-width videos on web pages. Well, credit goes to its developer Chris Coyier and Paravel. Flickerplate Flickerplate is a full-featured and touch-enabled responsive plugin that allows designers to ‘flick’ through content. This plugin is extensively used by designers to create responsive layouts for websites.  FlowType.JS If you want to see web typography at its finest, use FlowType.JS. Today, on several websites the most legible typography contains between 45-75 characters per line, and it is quite difficult to accomplish the sale for all screens with only CSS media queries. Further, this plugin simplifies this difficulty by changing empowering designs to change font size based on a particular element’s width.  FullPage.JS fullPage.js from Alvaro Trigo is a powerful plugin that allows designers to create fast and simple full-screen scrolling pages. GridScrolling.JS When it comes to providing easy cursor key navigation by positioning sections and asides in a grid, Gridscrolling.js plugin is the first choice among designers. jq-idealforms Ijq-idealforms is a full-featured framework that allows designers to create and validating responsive HTML5 forms. Moreover, it supports third party extensions and all modern browsers. Masonry For creating a dynamic grid layout, Masonry is a powerful jQuery plugin. Designers use this plugin to place elements at the optimal position based on vertical space. You may have seen it in use on several websites.  nanoGALLERY nanoGALLERY is a touch-enabled image gallery plugin that empowers designers to design fully responsive image galleries with different layouts. By using this plugin, you can provide an elegant look to your website gallery. pagePiling.JS pagePiling.js is a fantastic jQuery plugin that allows designers to pile layout sections over one another that users can access by scrolling.

It supports all modern browsers and old browsers like Opera 12 and IE 8. Further, it gives plenty of options and methods to use, a perfectly designed plugin to work on tablets and smartphones. PhotoSwipe When it comes to creating an enthralling image gallery for smartphones and desktops, PhotoSwipe is highly preferred and used by designers.  Responsive Tables Tables often break a responsive layout. Don’t let this happen in your case. To make your tables adapt to the small screens, you can rely on Responsive Tables, a jQuery plugin that helps you get rid of the layout-disturbing table issue. You can also use a WordPress tables plugin that can do everything almost automatically for you Responsive Calendar Responsive Calendar is a feature-rich and fully responsive jQuery plugin that is available free for non-commercial use. The websites that use this plugin allow freedom to users to add, delete, and remove events. Responsive Nav Responsive Nav is a powerful tiny JavaScript plugin that and helps designers to create a toggled navigation for small screens. It uses CSS3 transitions to provide the best possible layouts with an assured performance. It works well with almost all the main desktop and mobile browsers. ResponsiveSlides.js ResponsiveSlides.js is a fully responsive jQuery plugin that weighs just 1kb. Further, it provides multiple slideshow options that designers can use to create enticing effects on their websites. Responsive Tabs Responsive Tabs is a must-have plugin that fulfills the need of creating responsive tabs. The tabs created with the aid of this plugin quickly adapt to any screen to provide a perfectly responsive experience to the users. It is an ideal solution for creating tabs that work on desktops, tablets, and smartphones.  SlabText.js When it comes to creating big, bold, and responsive headlines for websites, SlabText provides great support to designers. It quickly adapts to different screens and provides a unique look and feel to a website. Slicknav Slicknav is a must-have Jquery plugin that provides multi-level support and cross-browser compatibility that allows designers to create eye-catching menus. Slidebars Slidebars is a lightweight (2kb) plugin that helps designers to create an app-style push menu and sidebars for websites. timeBOX timeBOX is a powerful plugin that enhances the content of any site. Its beautiful and responsive overlay helps designers to create a responsive layout. It is one of the best Lightbox plugins. Further, it provides cross-browser support and is compatible with WordPress 4.0 or greater. TinyNav.js TinyNav.js is a must-have Jquery plugin that weighs just 452 bytes that are created to work for small screens like iPhones. This plugin empowers designers to transform navigation menus into a selection for smartphones. Conclusion The Jquery plugins that I mentioned above are extensively used to create responsive layouts. If you want to transform your web pages into responsive layouts, then surely these plugins will help you. Did you like this post, don’t forget to drop your valuable comments below. Abhyudaya Tripathi is a digital marketing expert with over 8 years of precious experience and presently he is an Associate Director at ResultFirst. He is extremely passionate about making information seekers and quest lovers aware about digital marketing.

[codewithrandomartical]

10+ HTML CSS Portfolio Websites (Demo + Source Code)

Portfolio Websites Using HTML and CSS (Source Code)

Are you looking for the best portfolio websites with source code?

Another blog, another step towards our learning journey, Hey my enthusiastic developers, welcome to Codewithrandom with a new blog. Today we will see different portfolio websites for web developers with source code. Whether you are a beginner or a professional web developer these best portfolio websites with source code will always help you.

We have the best-handpicked portfolio websites with source code. Learn Custom-made free portfolio source code with code and demo for you.

Related Project:-

Create Portfolio Website Using HTML and CSS (Source Code)

Personal Portfolio Website Using HTML & CSS With Source Code

25+ Web Developer Portfolios Including Jack Jeznach

Let’s see some cool 10+ Portfolio Website Templates.

1. Personal Webpage

Bradley Engelhardt HTML, CSS, and JS A single page scrolling portfolio site I was working on using fullpage.js, wow.js, and animate.css.

2. Portfolio

Emerald Teve HTML, CSS, and JS A personal portfolio that is mostly made for web browsers, but can be accessed on phones as well. Looks better in portrait mode on phones, though.

3. Portfolio Page

Yago Estévez HTML(Pug), CSS, and JS(Babel) After 7 months of programming everyday and more than 30 projects built, this is last project I made for the FreeCodeCamp curriculum. It’s been a great journey and I learnt A LOT of new stuff!

4. Portfolio page with animations

Islam Ibakaev HTML, CSS(SCSS), and JS Super awesome portfolio with off-canvas menu and a lot of animations.

5. Portfolio

click and get full article and get complete source code

That’s it, folks. In this article, we shared 10+ Portfolio Website templates with cool and different designs.

Hope you liked this article. Share this with your fellow developers. Comment down below your thoughts and suggestions, we would love to hear from you.

See our other articles on codewithrandom and gain knowledge in Front-End Development.

Thank you and keep learning!!

follow us on Instagram: Ashutosh Mishra

[scriptsthemes]

https://scriptuz.com/item/smart-one-page-navigation-addon-for-visual-composer-free-download/

“Smart One Page Navigation – Addon For Visual Composer Free Download” is lockedSmart One Page Navigation – Addon For Visual Composer Free Download

[kuzuriha]

All in One #01 REVAMP: Calliope >> Coiréil by kuzuriha

This is all I’ll ever need, you and I.

LIVE PREVIEW / VIEW CODE

Contains about, blogroll, tags, and faq sections.

3 custom links, you can add as much as needed.

Icons: @alydae

Fonts: ABeeZee, Crete Round

Full page scrolling and slides by fullpage.js.

This is the revamp of my first AiO page and is an entry to the Coding Cabin’s Pantone Color of the Year challenge, which requires the usage of the hex code #FF6F61 Living Coral. This page is also influenced by Westlife’s comeback single, Hello My Love which is absolutely amazing because my childhood crushes are always so cool. All the customization notes are included in the code, so please make sure to read the code first before asking me things -- of course if things go south, feel free to hit me on my ask.

Please like and or reblog if you like this or are using this!

[oxythms]

Portfolio Page: Professional preview | download

A clean and simple portfolio to showcase your work.

Features:

fullpage.js

title page, projects page, contact page

700x350 images

contact icons

Note: Instructions are in the code.

Credits: FullPage.js: Alvarotrigo Icons: Awesome Fonts  Big thank you to @shudesigns for helping me find the code for fullPage.js!

Please like and/or reblog this post if you use this page! ♡

[1nulled-blog]

FullPage for Visual Composer v1.7.2

New Post has been published on https://www.1nulled.com/fullpage-for-visual-composer-v1-7-2/

FullPage for Visual Composer v1.7.2

Now, create beautiful scrolling full screen web sites with Visual Composer, fast and simple. This plugin simplifies creation of full page scrolling websites with WordPress and saves you big time.

[amazing-jquery-plugins]

Touch-friendly Fullscreen Scrolling With jQuery - fullPage.js

fullPage.js is a dead simple jQuery plugin for creating smooth mobile-friendly fullscreen scrolling effect for one page scrolling website.

Demo

Download

[knightmajorproject]

Major Project - Initial Ideas - Week 1

Lucia’s World Continuation – Matmi – web design

Continuing with Negotiated brief project, with the expansion of the Lucia’s World website developing it so it can be launched. Implementing conceptual ideas that were presented to Matmi as well as developing social interactions for the website. With the possibility of exploring the moving of content from the app in to a website emulator.

Improving upon current design by implementing conceptual ideas.

Increasing social interactions based around Lucia’s World

Creation of a web portal for Lucia’s World that is similar to the mobile app.

Including of more content such as images for the gallery.

Software & Skills

HTML & CSS

JavaScript

Web Design (XD & Illustrator)

Back-end development (online app emulator)

Valley of the first iron masters – web design

An interactive journey exploring the history of ‘iron masters’ that is presented through a website. The website would be a responsive design that archives and presents the information that has been found from ongoing archaeological projects that have been carried out since 1980. This will also showcase the archaeological methods that have been used throughout this project, giving a description of each one and showing how it is applied (hopefully there is videos of ‘iron masters’ using these methods).

Improve upon the current website by utilizing JavaScript animations to make it ‘interactive’ and more engaging.

Can use fullpage.js plugin to create a smooth transition on mouse scroll as well as helping creating animation for the content.

Possibilities:

3-D models of ‘key findings’ that helped shape the narrative, going in-depth in the item and discussing how this helped fill the holes in history or completely change a narrative. A few ‘key findings’ for each era.

Live findings tracker, section of the website that would work hand-in-hand with the current projects that are happening. In a section, like a blog would track any findings (no matter how small), giving a title for the item, location, what team or person discovered this item and a description if necessary. This would also help with archiving and would act as live proof of the ‘successful’ work that is being done. This could also help with site traffic as daily updates of locations that have been explored could also be a possibility. Not only a tool for the general public this could also help archaeologists keep track of items they have discovered and places that have already been excavated.

Software & Skills:

HTML & CSS

JavaScript

Back-end development & linking to a database (live tracker)

Web design (XD & Illustrator)

Website Plugins i.e. fullpage.js

 Augmented Museum Artefacts

An interactive journey around a museum that brings to life the many artefacts that are being showcased. By utilizing augmented realty through the Unity in AR foundation, many exhibits would be brought to life either by displaying more information that could be tailored depending on the age group.

In my opinion museums are seen as something that families and couples go to and are quite family friendly. However, by setting an age of the group that uses this technology the access to more mature information based on the exhibition becomes available, creating an experience that is no longer limited and can be something that all age groups can enjoy. Furthermore, by adding the specialism one has in the area more information becomes available i.e. if one has knowledge about spacecrafts it will display more complex information this could come in the form of theoretical algorithms and formulas used to calculate space travel.

Example, when you go to the museum of science of industry there is no point going again unless there is a featured exhibition on a new area. This solution would give people who have knowledge on the area more relevant information. However, the downside to this is that for smaller less funded museums it is impossible to get more physical artefacts to encourage more than one visit.

Encourage more people to go to museums

Create more relevant information for people who have current knowledge of areas

[crookedstrawberryninja]

Fifa 2013 For Mac Os

Fifa 2013 For Mac Os 10.13

Fifa 2013 For Mac Os 10.10

Fifa 2013 For Mac Os High Sierra

Fifa 2013 For Mac Os Versions

FIFA 17 Mac OS X Version

Fifa 2013 For Mac Os 10.13

Fifa 2013 For Mac Os 10.10

On this page you can download FIFA 18 for Mac OS X! Full version of game FIFA 18 MAC Download Free. Link at the bottom of the page! About This Game: FIFA 18 is a sports game that simulates association football. The game features 52 fully licensed stadiums from 12 countries, including new stadiums, plus 30 generic fields equals to a total of 82. EA GAMES FOR MAC. Pst backup outlook mac. From high fantasy to competitive sports – you can tap into the excitement of EA's hottest Mac games! Unleash your imagination in The Sims 4, rise to power and fight epic battles in Dragon Age II, build a living world where every choice matters in SimCity, and more. Alex Hunter has made its appearance in FIFA 17 and the players loved it. Now its back with even more intense gameplay. So, if you download FIFA 18 Mac OS X you will be able to continue the journey with the young english player. If you have not played yet this mode, download FIFA 17 Mac OS and give it a try because is something brand new in the series. Fifa 12 mac free download. FullPage.js fullPage.js is an easy-to-use library for creating beautiful, fullscreen scrolling websites/ onepage. You may not immediately think 'gaming' when you think 'Mac,' but there are tons of games for the Mac these days, and some of the most popular PC games are also available for OS X.

MacGamesBox have some great news for all Fifa players. Fifa 17 arrived and can be played on MacBooks now! Mac for ios. FIFA 17 Mac OS X version is available to download now via torrent or directly. The game developed by EA Sports has been converted for all OS X computers. In the last game from fifa series the developers added for us a lot of great improvements. For example now we have a new mode named “The Journey“. You create your own career with your own player. Something like we already have in NBA2k16. They also added new sound effects and occurs better graphics.

As can bee seen the graphics are with 20-30 % better than Fifa 16 for mac. The developers made this game to be first from the series that will run on the engine Frostbite. They also added new managers from all the world and all new teams players. FIFA 17 Mac OS X has been tested and has been found 100% working on all MacBooks. On retina iMac then game is really awesome, also Macbook Pro and MacBook Air can run the game perfectly. This version is FULL! Not require any activation key, cracks or anything else. The game has been converted and run without emulators installed in your OS X Computer. Our team has rated this game with 9.4 points from 10 and include it to the section “Top Football Games”

FIFA 17 Mac OS X requirements

The game from EA Sports require at least configuration listed above. To run it on your Macintosh the your computer should meet this requirements. Is recommended to has CPU with I5 and 2.8 GHz speed. Ram memory minimum is 4GB and approximately 30 GB free disk space. Check to have installed OS X 10.6.4 or newer to run it perfectly. If your mac meet all this requirements then you can play FIFA 17 without any problems or lag.

FIFA 17 Mac OS X Download

Fifa 2013 For Mac Os High Sierra

The game is available to download now with directly or via torrent! If your internet connection is not very good the is recommended to use torrent download. Get the .torrent file, open it with uTorrent or BitTorrent , selected destination folder and start the download. After is finished open the .dmg file and start running the game.

Fifa 2013 For Mac Os Versions

Video Gameplay On MacBook

[holytheoristtastemaker]

JavaScript is one of the most popular languages on the web. Even though it was initially developed just for web pages, it has seen exponential growth in the past two decades.

Now, JavaScript is capable of doing almost anything and works on several platforms and devices including IoT. And with the recent SpaceX Dragon launch, JavaScript is even in space.

One of the reasons for its popularity is the availability of a large number of frameworks and libraries. They make development much easier compared to traditional Vanilla JS development.

There are libraries for almost anything and more are coming out almost every day. But with so many libraries to choose from it becomes difficult to keep a track of each one and how it might be tailored specifically to your needs.

In this article, we will discuss 10 of the most popular JS libraries which you can use to build your next project.

Leaflet

Leaflet

I think Leaflet is the best open source library for adding mobile-friendly interactive maps to your application.

Its small size (39kB) makes it a great alternative to consider over other map libraries. With cross-platform efficiency and a well-documented API, it has everything you need to make you fall in love.

Here is some sample code that creates a Leaflet map:

var map = new L.Map("map", { center: new L.LatLng(40.7401, -73.9891), zoom: 12, layers: new L.TileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png") });

In Leaflet, we need to provide a tile layer since there isn't one by default. But that also means that can choose from a wide range of layers both free and premium. You can explore various free tile layers here.

Read the Docs or follow the Tutorials to learn more.

fullPage.js

This open-source library helps you create full-screen scrolling websites as you can see in the above GIF. It's easy to use and has many options to customize, so it's no surprise it is used by thousands of developers and has over 30k stars on GitHub.

Here is a Codepen demo that you can play with:

You can even use it with popular frameworks such as:

react-fullpage

vue-fullpage

angular-fullpage

I came across this library about a year ago and since then it has become one of my favorites. This is one of the few libraries that you can use in almost every project. If you haven't already started using it then just try it, you will not be disappointed.

anime.js

anime.js

One of the best animation libraries out there, Anime.js is flexible and simple to use. It is the perfect tool to help you add some really cool animation to your project.

Anime.js works well with CSS properties, SVG, DOM attributes, and JavaScript Objects and can be easily integrated into your applications.

As a developer it's important to have a good portfolio. The first impression people have of your portfolio helps decide whether they will hire you or not. And what better tool than this library to bring life to your portfolio. It will not only enhance your website but will help showcase actual skills.

Check out this Codepen to learn more:

You can also take a look at all the other cool projects on Codepen or Read the Docs here.

Screenfull.js

screenfull.js

I came across this library while searching for a way to implement a full-screen feature in my project.

If you also want to have a full-screen feature, I would recommend using this library instead of Fullscreen API because of its cross-browser efficiency (although it is built on top of that).

It is so small that you won't even notice it – just about 0.7kB gzipped.

Try the Demo or read the Docs to learn more.

Moment.js

Moment.js

Working with date and time can be a huge pain, especially with API calls, different Time Zones, local languages, and so on. Moment.js can help you solve all those issues whether it is manipulating, validating, parsing, or formatting dates or time.

There are so many cool methods that are really useful for your projects. For example, I used the .fromNow() method in one of my blog projects to show the time the article was published.

const moment = require('moment'); relativeTimeOfPost = moment([2019, 07, 13]).fromNow(); // a year ago

Although I don't use it very often, I am a fan of its support for internationalization. For example, we can customize the above result using the .locale() method.

// French moment.locale('fr'); relativeTimeOfPostInFrench = moment([2019, 07, 13]).fromNow(); //il y a un an // Spanish moment.locale('es'); relativeTimeOfPostInSpanish = moment([2019, 07, 13]).fromNow(); //hace un año

Moment.js Homepage

Read the Docs here.

Hammer.js

Hammer.js is a lightweight JavaScript library that lets you add multi-touch gestures to your Web Apps.

I would recommend this library to add some fun to your components. Here is an example to play with. Just run the pen and tap or click on the grey div.

It can recognize gestures made by touch, mouse and pointerEvents. For jQuery users I would recommend using the jQuery plugin.

$(element).hammer(options).bind("pan", myPanHandler);

Read the Docs here.

Masonry

Masonry

Masonry is a JavaScript grid layout library. It is super awesome and I use it for many of my projects. It can take your simple grid elements and place them based on the available vertical space, sort of like how contractors fit stones or blocks into a wall.

You can use this library to show your projects in a different light. Use it with cards, images, modals, and so on.

Here is a simple example to show you the magic in action. Well, not magic exactly, but how the layout changes when you zoom in on the web page.

And here is the code for the above:

var elem = document.querySelector('.grid'); var msnry = new Masonry( elem, { itemSelector: '.grid-item', columnWidth: 400 }); var msnry = new Masonry( '.grid');

Here is a cool demo on Codepen:

Check out these Projects

https://halcyon-theme.tumblr.com/

https://tympanus.net/Development/GridLoadingEffects/index.html

https://www.erikjo.com/work

D3.js

If you are a data-obsessed developer then this library is for you. I have yet to find a library that manipulates data as efficiently and beautifully as D3. With over 92k stars on GitHub, D3 is the favorite data visualization library of many developers.

I recently used D3 to visualize COVID-19 data with React and the Johns Hopkins CSSE Data Repository on GitHub. It I was a really interesting project, and if you are thinking of doing something similar, I would suggest giving D3.js a try.

Read more about it here.

slick

slick

Slick is fully responsive, swipe-enabled, infinite looping, and more. As mentioned on the homepage it truly is the last carousel you'll ever need.

I have been using this library for quite a while, and it has saved me so much time. With just a few lines of code, you can add so many features to your carousel.

$('.autoplay').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, });

Autoplay

Check out the demos here.

Popper.js

Popper.js

Popper.js is a lightweight ~3 kB JavaScript library with zero dependencies that provides a reliable and extensible positioning engine you can use to ensure all your popper elements are positioned in the right place.

It may not seem important to spend time configuring popper elements, but these little things are what make you stand out as a developer. And with such small size it doesn't take up much space.

Read the Docs here.

Conclusion

As a developer, having and using the right JavaScript libraries is important. It will make you more productive and will make development much easier and faster. In the end, it is up to you which library to prefer based on your needs.

These are 10 JavaScript libraries that you can try and start using in your projects today. What other cool JavaScript libraries you use? Would you like another article like this? Tweet and let me know.

[gaviwei]

一頭鑽進熱愛的世界 / Web

2019.10

design / gavi

front-end / gavi

tech / HTML,CSS,full-page.js ,RWD

https://www.damanwoo.com/events/beloved

An event page interview 5 masters in their fields. Such as the artist who had drawn movie billboards for more than 50 years, a theater manager running the theater for 30 years, a writer who focused on exploring the old-time beauty and try to preserve it through the article spread on the social network.

This project was the first time try in to use fullpage.js. For the time I started to code by myself, I got frustrated dealing with Js function, also not really familiar with this language, that's the reason I rarely use it. But I and my client had some ambitions on this, so we try this with an open-minded. Even though we kinda failed at the time when we supposed to run this project, the frame of the original website doesn't combine this framework well, so we end up post the not full-page one. But after that, I got some spare time during vacation, I figure out the bugs, and fix it. (yeah~~).

[kjunichi]

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA [はてなブックマーク]

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版） - ICS MEDIA

スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？　かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJav...

from kjw_junichiのはてなブックマーク https://ift.tt/36szztB

[ethan-haveron]

The home page

From my research post, you know that I want to try and created a full page slider that will show of my portfolio. I used fullpage.js  for this but I kept running into problems with making everything responsive and I didn't want to spend super long trying to fix it and not getting anywhere so I decided for an alternative.

I was looking through codepen and randomly came across this 50/50 page slider that was skewed and around a 20-degree angle that I thought was really cool. when you scrolled down the two containers slid past each other, thus showing another two containers.

I instantly forked it to my own codepen account so I could play around with it. To start with I wanted to remove the skewed angle and just have a nice clean verticle line separating the two containers.

Other parts of the code confused me and I didn't understand what they did. so I figured the best way for me to learn was to just go deleting stuff and to see what happened after. it turns out that this was a fantastic way for me to learn what everything did as I now know more about what I'm working with I can make it my own.

The scroll was a bit too fast for me so I went in and increased the time it took for a full container split to happen. this now feels and looks a lot nicer.

Adding images was the biggest pain to do as they still currently don't sit perfectly centred, but they are in and work so I can fiddle with the detail later on as I just want to get the main bulk of my website complete.

[ethanmcgonigle]

Heroes & Villains Finished Screens

So after much deliberation, I decided to cut out the 'Measuring Mr Holmes' section of my website.

Above in the photos I screenshotted photos of my finished screens for my Sherlock Holmes website. I chose to represent each fullpage section with an illustration relevant to the topic. So for example the door of 221B Baker Street to represent the 221B Baker Street section and the projector to represent the 'On The Silver Screen' section.

I felt that in doing this, I could really showcase my illustrations, which was what I wanted because of how much time I spent time on them. These also worked really well in conjunction with the fullpage.js script I used. This created a smooth scrolling effect bringing users from one section down to the next (or to the next slide in that section) and vice versa. I believe this improved the user-friendliness of my site and minimised the amount of work the user had to do, while still showing them all the necessary content.

[oxythms]

hi how did you make the pages slide on your page professional?

hi there, that “sliding” is due to fullPage.js. you can find the link to it in my credits