1
Александр
no recommendations
no complaints
Closed
Project title: Development of HTML+JS slider of pages of electronic journal
Type of cooperation: One-time project
Section: Web development
Prepayment: without prepayment
Payment methods: Bank transfer, Electronic money
Acceptance of requests: closed
Type of cooperation: One-time project
Section: Web development
Prepayment: without prepayment
Payment methods: Bank transfer, Electronic money
Acceptance of requests: closed
Project description:
You need to develop HTML+CSS+JS (or possibly other cross-browser solutions) horizontal slider pages of the electronic journal. For example, you can look at any magazine on the ISSUU portal, but it uses flash, which is not suitable for me.
The journal consists of jpg images 2048x1270px. Fly through horizontally, without the effect of turning the page, just passes the picture from right to left or back. Flicking is carried out either by buttons in the form of arrows to the left and right of the page, or by scrolling the mouse cursor with the left key clamped and similarly with a finger on a tablet / smartphone. Also at the bottom there should be a hidden menu with meniatures of all pages of the journal, the menu should open on 1/4 of the screen from the bottom and all the missing thumbnails of pages should scroll left and right to the first and last page, respectively. The thumbnail menu opens with a small button at the bottom right of the screen to display it. Clicking on any thumbnail left key or finger, scroll the pages of the journal to the selected.
The entire page on any display should fit 100% completely, if the horizontal display is narrow or it is a tablet in a portrait position, then the page should be exactly in the middle, and there will be a black background on the top and bottom, similarly, if the display is wide, then the page should be in the middle, and the left and right will be black background fields.
Any page can be approached with a single click of the mouse on a certain percentage or with two fingers on a tablet / smartphone to a certain predetermined percentage. The approximate page can be viewed by dragging it around the screen by holding the left mouse key or with a finger on a tablet / smartphone. When you flip to another page, the approach is reset.
On any pages it should be possible to place div, p, a, ul-li block with content in the form of a graphic or text link, image slider, vertical content slider in the div block, js animation, etc. As a page approaches, that content should also increase and decrease proportionally. On different displays, the content inside the page should not shift relative to the specified coordinates on the page.
On the right at the top should be placed the icon button, to open the main menu on the right side of the screen, on top of all visible content on the screen. The main menu should be a logo, 3-6 items of the menu, at the bottom of the social media icon.
Uploading images and pages when scrolling through the magazine should be gradual with advance of two, if I look at page No. 3, for example, then page No. 5 should already be loaded. A total of about 150-200 pages are planned.
I tried to implement it myself, but I don’t have time to understand all the subtleties of js. An example of what I stopped on 4 days of my development can be seen here It was supposed to use the js library hammer, but there is not enough knowledge to recreate it in the intended form. My leaflet is based on idangerous.swiper-2.0.min.js and movies-app.js
Multiplatformity - popular modern browsers for computers, tablets, smartphones. Firefox Mozilla, Google Chrome, Safari, IE10+ without downloading additional plugins, etc. For example, using adobe flash.
Interaction with content should be equally well implemented for both the mouse and the paraders in the case of tablets and smartphones.
Compulsory compliance with all requirements in the project description, ready to consider proposals for improving the functionality.
You need to develop HTML+CSS+JS (or possibly other cross-browser solutions) horizontal slider pages of the electronic journal. For example, you can look at any magazine on the ISSUU portal, but it uses flash, which is not suitable for me.
The journal consists of jpg images 2048x1270px. Fly through horizontally, without the effect of turning the page, just passes the picture from right to left or back. Flicking is carried out either by buttons in the form of arrows to the left and right of the page, or by scrolling the mouse cursor with the left key clamped and similarly with a finger on a tablet / smartphone. Also at the bottom there should be a hidden menu with meniatures of all pages of the journal, the menu should open on 1/4 of the screen from the bottom and all the missing thumbnails of pages should scroll left and right to the first and last page, respectively. The thumbnail menu opens with a small button at the bottom right of the screen to display it. Clicking on any thumbnail left key or finger, scroll the pages of the journal to the selected.
The entire page on any display should fit 100% completely, if the horizontal display is narrow or it is a tablet in a portrait position, then the page should be exactly in the middle, and there will be a black background on the top and bottom, similarly, if the display is wide, then the page should be in the middle, and the left and right will be black background fields.
Any page can be approached with a single click of the mouse on a certain percentage or with two fingers on a tablet / smartphone to a certain predetermined percentage. The approximate page can be viewed by dragging it around the screen by holding the left mouse key or with a finger on a tablet / smartphone. When you flip to another page, the approach is reset.
On any pages it should be possible to place div, p, a, ul-li block with content in the form of a graphic or text link, image slider, vertical content slider in the div block, js animation, etc. As a page approaches, that content should also increase and decrease proportionally. On different displays, the content inside the page should not shift relative to the specified coordinates on the page.
On the right at the top should be placed the icon button, to open the main menu on the right side of the screen, on top of all visible content on the screen. The main menu should be a logo, 3-6 items of the menu, at the bottom of the social media icon.
Uploading images and pages when scrolling through the magazine should be gradual with advance of two, if I look at page No. 3, for example, then page No. 5 should already be loaded. A total of about 150-200 pages are planned.
I tried to implement it myself, but I don’t have time to understand all the subtleties of js. An example of what I stopped on 4 days of my development can be seen here It was supposed to use the js library hammer, but there is not enough knowledge to recreate it in the intended form. My leaflet is based on idangerous.swiper-2.0.min.js and movies-app.js
Multiplatformity - popular modern browsers for computers, tablets, smartphones. Firefox Mozilla, Google Chrome, Safari, IE10+ without downloading additional plugins, etc. For example, using adobe flash.
Interaction with content should be equally well implemented for both the mouse and the paraders in the case of tablets and smartphones.
Compulsory compliance with all requirements in the project description, ready to consider proposals for improving the functionality.
