From 9ef3d540b954553992afbf1d94d800e825835f48 Mon Sep 17 00:00:00 2001 From: Marat200118 Date: Fri, 26 Jan 2024 12:01:49 +0100 Subject: [PATCH 1/2] modified horizonal scroll --- assets/svg/rails-horizontal.svg | 64 +++++++++++++++++++++++++++++++++ css/style.css | 33 ++++++++++++++++- index.html | 33 ++++++++++++++--- main.js | 24 +++++++++++-- 4 files changed, 147 insertions(+), 7 deletions(-) create mode 100644 assets/svg/rails-horizontal.svg diff --git a/assets/svg/rails-horizontal.svg b/assets/svg/rails-horizontal.svg new file mode 100644 index 0000000..3f5abf4 --- /dev/null +++ b/assets/svg/rails-horizontal.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/css/style.css b/css/style.css index 6ec2570..884cbd7 100644 --- a/css/style.css +++ b/css/style.css @@ -384,6 +384,9 @@ section { align-items: center; margin-top: 3rem; margin-bottom: 3rem; + background-image: url("../assets/svg/rails-horizontal.svg"); + background-repeat: repeat-x; + background-size: 20rem; } .investment-item p { @@ -470,6 +473,7 @@ section { margin: 0 auto; } + .animated-digit { font-size: clamp(2rem, 8vw, 4rem); line-height: 1; @@ -663,6 +667,10 @@ section { } +.material-symbols-outlined { + font-size: var(--font-size-big-title) !important; +} + /* * css media query */ @media (min-width: 768px) { @@ -780,6 +788,29 @@ section { flex-shrink: 0; } + .investment-item:first-of-type { + width: 60vw; + align-items: baseline; + } + + .investment-item:first-of-type h3 { + display: flex; + align-items: center; + animation: bouncing 2s infinite ease-in-out; + } + + @keyframes bouncing { + 25% { + transform: translateX(0); + } + 75% { + transform: translateX(3rem); + } + 100% { + transform: translateX(0); + } + } + .investment-left, .investment-right { width: 50%; } @@ -793,7 +824,7 @@ section { color: var(--orange); text-align: left; } - + .stories-links p { margin-top: 0; } diff --git a/index.html b/index.html index 136042b..4aa3d15 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ Full Speed Ahead + @@ -348,6 +350,18 @@

Infrabel

+ +
-
-

Investment and modernisation

-

NMBS/SNCB and Infrabel continue to invest in new rolling stock and in modernising the railway network in the + + +
+

Timeline + double_arrow +

+

Investment and modernisation

+

NMBS/SNCB and Infrabel continue to invest in new rolling stock and in modernising the railway network in the + 21st + century.

+

2011

diff --git a/main.js b/main.js index 7c59a28..d7e1a2d 100644 --- a/main.js +++ b/main.js @@ -1,9 +1,10 @@ import { gsap } from "gsap"; import lottie from "lottie-web"; import { ScrollTrigger } from "gsap/ScrollTrigger"; +import { TextPlugin } from "gsap/TextPlugin"; const init = () => { - gsap.registerPlugin(ScrollTrigger); + gsap.registerPlugin(ScrollTrigger, TextPlugin); lgvAnimation(); flagsAnimation(); leuvenAnimation(); @@ -18,9 +19,28 @@ const init = () => { animateEvents(); readingTextAnimation(); animateOpinionCards(); - // animateNumbers(); + // horizontalTextScroll(); } + +// const horizontalTextScroll = () => { +// gsap.to(".horizontal-scroll", { +// x: () => +// -( +// document.querySelector(".horizontal-scroll").scrollWidth - +// window.innerWidth +// ) + "px", +// ease: "none", +// scrollTrigger: { +// trigger: ".text-section", +// pin: true, +// scrub: 1, +// end: () => +// "+=" + document.querySelector(".horizontal-scroll").offsetWidth, +// }, +// }); +// }; + const readingTextAnimation = () => { splitText(".history-text"); From 80d684e76f1954276e8d249784f954735b576c27 Mon Sep 17 00:00:00 2001 From: Marat200118 Date: Fri, 26 Jan 2024 13:20:00 +0100 Subject: [PATCH 2/2] fixed the zoom out, and few issues --- css/style.css | 21 ++ index.html | 1005 +++++++++++++++++++++++++------------------------ main.js | 6 +- package.json | 2 +- 4 files changed, 538 insertions(+), 496 deletions(-) diff --git a/css/style.css b/css/style.css index 884cbd7..5037792 100644 --- a/css/style.css +++ b/css/style.css @@ -70,6 +70,9 @@ body { min-height: 100vh; background-color: var(--light-color); scroll-behavior: smooth; +} + +.site-wrapper { overflow-x: hidden; } @@ -588,6 +591,12 @@ section { align-items: center; } +/* .animation-text { + position: absolute; + left: 10rem; + top: -2rem; +} */ + .animation-text__line { display: flex; flex-direction: row; @@ -671,11 +680,17 @@ section { font-size: var(--font-size-big-title) !important; } +.animation-container { + display: flex; + flex-direction: column-reverse; +} + /* * css media query */ @media (min-width: 768px) { .ahead-animation { + margin-top: 2rem; display: block; width: 80%; } @@ -1061,4 +1076,10 @@ section { .text-content { flex-direction: row; } + + .animation-container { + display: flex; + flex-direction: row; + } + } \ No newline at end of file diff --git a/index.html b/index.html index 4aa3d15..aa169cf 100644 --- a/index.html +++ b/index.html @@ -15,44 +15,100 @@ - -
-
- - +
+
+
+ + +
+ Plan your visit
- Plan your visit -
-
-

Full Speed

- abstract -

Ahead

-
-
-

End of the XX – beginning of the XXI century

-
- -
-

1986

-

High speed line history

-
-

At the 1986 annual conference of the Ministers of Transport for France,$ Germany, Belgium - and The Netherlands, a high-speed network between$ Paris – Brussels - Cologne/Amsterdam, or PBKAL for short (the first letters$ of each - connected - city) was discussed for the first time.$ The L referred to London, which would also be connected to this network - via the - Channel Tunnel. -

-
-
-
+
+

Full Speed

+ abstract +

Ahead

+
+
+

End of the XX – beginning of the XXI century

+
+ +
+

1986

+

High speed line history

+
+

At the 1986 annual conference of the Ministers of Transport for France,$ Germany, + Belgium + and The Netherlands, a high-speed network between$ Paris – Brussels - Cologne/Amsterdam, or PBKAL for short + (the first letters$ of each + connected + city) was discussed for the first time.$ The L referred to London, which would also be connected to this + network + via the + Channel Tunnel. +

+
+
+
+ +
+
+

Start the historical journey -
Sign the Document

+

Drag and Drop Countries in a right order of
PBKAL document, when ready - sign the contract! +

+
+
+ France +
+
+ Belgium +
+
+ Germany +
+
+ Netherlands +
+
+ UK +
+
+ +
+ +
+
+
+

The Establishment and Development of the PBKAL High-Speed Rail Network

+ +
+
+
+
+
+
+
+

This document is allows building PBKAL, a high-speed rail network connecting + Paris, Brussels, Cologne, Amsterdam, + and London. It's the result of a collaborative effort between France, Germany, Belgium, the + Netherlands, and the United + Kingdom. This is a unique opportunity to connect the most important cities in Europe to open the new + possibilities! +

+
+

Paris, 1986

+

Minister of Transport

+
+
+
+
-
-
-

Start the historical journey -
Sign the Document

-

Drag and Drop Countries in a right order of
PBKAL document, when ready - sign the contract! -

+
+
+

Let's test your knowledge!

+

Try to place the countries in the boxes and collect the word "PBKAL"

+
France @@ -70,518 +126,485 @@

Start the historical journey -
Sign the Document< UK

- -
- -
-
-
-

The Establishment and Development of the PBKAL High-Speed Rail Network

- -
-
-
-
-
-
-
-

This document is allows building PBKAL, a high-speed rail network connecting - Paris, Brussels, Cologne, Amsterdam, - and London. It's the result of a collaborative effort between France, Germany, Belgium, the - Netherlands, and the United - Kingdom. This is a unique opportunity to connect the most important cities in Europe to open the new - possibilities! -

-
-

Paris, 1986

-

Minister of Transport

-
+
+
+
+
+
+
+
+
+

P

+

B

+

K

+

A

+

L

+
+
+ +
+
+
+ +
+

But there were different opinions..

+ +
+ rails +
+

Environmental Concerns

+

The construction of new railway lines often requires significant land alteration, which can disrupt local + ecosystems, + lead to the loss of wildlife habitats, and increase noise and air pollution.

+
+
+

Regional Development Concerns

+

In Belgium, there was specific resistance in the Campine region against the HST. This resistance was partly + due to + concerns about the impact on the local environment and communities

+
+
+

Financial Costs

+

Critics pointed out the high costs associated with building and maintaining high-speed rail lines. The + investment + required for such projects is substantial, leading to concerns about whether the financial benefits justify + the expense.

+
+
+

Economic Development

+

Proponents argued that high-speed trains could significantly boost economic development. They improve + connectivity + between cities, reduce travel times, and can attract businesses and tourism.

+
+
+

Job Creation

+

The construction and operation of HST lines were also seen as opportunities for job creation, both directly + in the + railway sector and indirectly in related industries.

+
+
+

Modernization of Transport

+

Supporters viewed the HST as a step towards modernizing Belgium's transportation infrastructure, aligning + it + with other + leading European nations that were already investing in high-speed rail.

-
+

-
-
-

Let's test your knowledge!

-

Try to place the countries in the boxes and collect the word "PBKAL"

-
-
-
- France -
-
- Belgium -
-
- Germany -
-
- Netherlands -
-
- UK -
-
-
-
-
-
-
-
-
-
-

P

-

B

-

K

-

A

-

L

-
-
- -
-
-
- -
-

But there were different opinions..

- -
- rails -
-

Environmental Concerns

-

The construction of new railway lines often requires significant land alteration, which can disrupt local - ecosystems, - lead to the loss of wildlife habitats, and increase noise and air pollution.

-
-
-

Regional Development Concerns

-

In Belgium, there was specific resistance in the Campine region against the HST. This resistance was partly - due to - concerns about the impact on the local environment and communities

-
-
-

Financial Costs

-

Critics pointed out the high costs associated with building and maintaining high-speed rail lines. The - investment - required for such projects is substantial, leading to concerns about whether the financial benefits justify - the expense.

-
-
-

Economic Development

-

Proponents argued that high-speed trains could significantly boost economic development. They improve - connectivity - between cities, reduce travel times, and can attract businesses and tourism.

-
-
-

Job Creation

-

The construction and operation of HST lines were also seen as opportunities for job creation, both directly - in the - railway sector and indirectly in related industries.

-
-
-

Modernization of Transport

-

Supporters viewed the HST as a step towards modernizing Belgium's transportation infrastructure, aligning it - with other - leading European nations that were already investing in high-speed rail.

-
-
-
- -
-

Some events helped to make it happen

-
-
-
-

Eurotunnel and (LGV Nord)

-
-
-
-
-
-

Paris - London

-
- plane -

3:30 hours

-
-
- train -

2:15 hours

+
+

Some events helped to make it happen

+
+
+
+

Eurotunnel and (LGV Nord)

+
+
+
+
+
+

Paris - London

+
+ plane +

3:30 hours

+
+
+ train +

2:15 hours

+
-
-
-

1994

-

Opened in 1994, the Eurotunnel is an engineering marvel, connecting the UK and France - with the world's longest undersea - tunnel portion. It dramatically reduces travel time between the two countries, symbolizing a triumph of - technology and - international cooperation.

After Eurotunnel was build you can go from Paris to London in 2 hours -

+
+

1994

+

Opened in 1994, the Eurotunnel is an engineering marvel, connecting the UK and + France + with the world's longest undersea + tunnel portion. It dramatically reduces travel time between the two countries, symbolizing a triumph of + technology and + international cooperation.

After Eurotunnel was build you can go from Paris to London in 2 hours +

+
-
- - -
-
-

HSL Leuven - Liège

-
-
-
-
-
-

Leuven - Liège

-
- car -

1 hour

-
-
- train -

0:30 minutes

+ + +
+
+

HSL Leuven - Liège

+
+
+
+
+
+

Leuven - Liège

+
+ car +

1 hour

+
+
+ train +

0:30 minutes

+
-
-
-

2002

-

In 2002, a significant milestone in the development of Belgium's high-speed rail - network was marked with the opening of - the High-Speed Line (HSL) between Leuven and Liège. This line was a key part of Belgium's commitment to - enhancing its - railway infrastructure, greatly reducing travel time between these two major cities. -

+
+

2002

+

In 2002, a significant milestone in the development of Belgium's high-speed rail + network was marked with the opening of + the High-Speed Line (HSL) between Leuven and Liège. This line was a key part of Belgium's commitment to + enhancing its + railway infrastructure, greatly reducing travel time between these two major cities. +

+
-
- - -
-
-

HSL 4, Amsterdam - Brussels

-
-
-
-
-
-

Amsterdam - Brussels

-
- car -

2:12 hours

-
-
- train -

1:19 hours

+ + +
+
+

HSL 4, Amsterdam - Brussels

+
+
+
+
+
+

Amsterdam - Brussels

+
+ car +

2:12 hours

+
+
+ train +

1:19 hours

+
-
-
-

2009

-

2009 witnessed the further expansion of Belgium's high-speed rail capabilities with two - significant openings. The first - was the Chênée - Walhorn section, which included the impressive Soumagne Tunnel, known for being the longest - railway - tunnel in Belgium. This section was crucial for enhancing the connectivity in the eastern part of the - country. -

+
+

2009

+

2009 witnessed the further expansion of Belgium's high-speed rail capabilities with + two + significant openings. The first + was the Chênée - Walhorn section, which included the impressive Soumagne Tunnel, known for being the + longest + railway + tunnel in Belgium. This section was crucial for enhancing the connectivity in the eastern part of the + country. +

+
+
- -
-
- -
-

- In 16 years, Belgium had become the 1st country in Europe to achieve a complete HSL network, suitable for speeds of 300 - kilometres per hour. The investment ran to well over -
5 000 000 000
euros - the highest since the World Expo in 1958. The money was spent not only on high-speed lines, but - also on the 3.8 km-long underground North-South link in Antwerp and on the Brussels-Midi, Antwerpen-Centraal and - Liège-Guillemins stations. -

-
- -
-

The new face of the Belgian railways

-

2014 - Now

-

The federal parliament carried out a new restructuring in 2014, aimed at more efficient management and better - operational performance.

- -
-
-
-
- - - - -
-
- -

NMBS/SNCB

-

Railway operator

-
-

Operates the trains

-

Manages the stations

-

Manages the ticketing

-
+
+ +
+

+ In 16 years, Belgium had become the 1st country in Europe to achieve a + complete HSL network, suitable for speeds of 300 + kilometres per hour. The investment ran to well over +
5 000 000 000
euros - the highest since the World Expo in + 1958. The money was spent not only on high-speed lines, but + also on the 3.8 km-long underground North-South link in Antwerp and on the Brussels-Midi, Antwerpen-Centraal and + Liège-Guillemins stations. +

+
+ +
+

The new face of the Belgian railways

+

2014 - Now

+

The federal parliament carried out a new restructuring in 2014, aimed at more efficient management and better + operational performance.

+ +
+
+
-
- -

HR-Rail

-

Legal employer

-
-

Manages the staff

-

Manages the recruitment

-

Manages the social consultation

+ + + + +
+
+ +

NMBS/SNCB

+

Railway operator

+
+

Operates the trains

+

Manages the stations

+

Manages the ticketing

+
-
-
- -

Infrabel

-

Infrastructure manager

-
-

Manages the railway infrastructure

-

Manages the train traffic

-

Manages the train paths

+
+ +

HR-Rail

+

Legal employer

+
+

Manages the staff

+

Manages the recruitment

+

Manages the social consultation

+
+
+
+ +

Infrabel

+

Infrastructure manager

+
+

Manages the railway infrastructure

+

Manages the train traffic

+

Manages the train paths

+
-
+
-
-
- - - - -
- - -
- - -
-

Timeline - double_arrow -

-

Investment and modernisation

-

NMBS/SNCB and Infrabel continue to invest in new rolling stock and in modernising the railway network in the +

+ + + + +
+ + +
+ + +
+

Timeline + double_arrow +

+

Investment and modernisation

+

NMBS/SNCB and Infrabel continue to invest in new rolling stock and in modernising the railway network in + the + 21st + century.

+
-
-

2011

-
-
-

The New Trains

-

NMBS/SNCB brought a new range of electric units into service for local and regional passenger transport. - This consists - of 305 three-part electric units of the ‘Desiro Main Line’ type. These are light-weight trains with a - low-floor section, - making them supremely suited to routes with many stops.

-
- -
- - investment-img - +
+

2011

+
+
+

The New Trains

+

NMBS/SNCB brought a new range of electric units into service for local and regional passenger + transport. + This consists + of 305 three-part electric units of the ‘Desiro Main Line’ type. These are light-weight trains with a + low-floor section, + making them supremely suited to routes with many stops.

+
+ +
+ + investment-img + +
-
-
-

2012

-
-
-

The Diabolo Project

-

This project, providing northern access to Zaventem (Brussels Airport), involved constructing a new railway - line between - Mechelen and Schaerbeek, running largely along the E19 motorway and connecting to the airport through a railway - triangle.

-
- -
- - desiro +
+

2012

+
+
+

The Diabolo Project

+

This project, providing northern access to Zaventem (Brussels Airport), involved constructing a new + railway + line between + Mechelen and Schaerbeek, running largely along the E19 motorway and connecting to the airport through a + railway + triangle.

+
+ +
+ + desiro +
-
-
-

2015

-
-
-

RER Network

-

Major works since 2006 have been undertaken for the Brussels RER (Réseau Express Régional), including the - expansion of various lines to four tracks and the construction of the Schuman-Josaphat Tunnel. Officially opened - on December 13, 2015, it aims to enhance the suburban transport network.

+
+

2015

+
+
+

RER Network

+

Major works since 2006 have been undertaken for the Brussels RER (Réseau Express Régional), including + the + expansion of various lines to four tracks and the construction of the Schuman-Josaphat Tunnel. + Officially opened + on December 13, 2015, it aims to enhance the suburban transport network.

+
+
+ RER Suburban Network +
-
- RER Suburban Network +
+ +
+

2020

+
+
+

M7 Carriages

+

In 2020, NMBS/SNCB introduced the first M7 carriages, with 445 double-decker carriages ordered to + provide + 50,000 seats. These new carriages, designed based on comprehensive traveller surveys, boast modern + safety + systems and enhanced comfort.

+
+
+ M7 Carriages +
+
-
-

2020

-
-
-

M7 Carriages

-

In 2020, NMBS/SNCB introduced the first M7 carriages, with 445 double-decker carriages ordered to provide - 50,000 seats. These new carriages, designed based on comprehensive traveller surveys, boast modern safety - systems and enhanced comfort.

+
+

Test Yourself

+

Draw on the map your “Dream route” and explore its distance, travel time and estimated + cost

+
+ +
+ +
+
+

Route Distance

+

Draw on map

-
- M7 Carriages +
+

Travel time

+

With average speed of 200km/h

+
+

Estimated Costs

+

With cost of 25 millions / km

+
+ +
+
-
-
+
-
-

Test Yourself

-

Draw on the map your “Dream route” and explore its distance, travel time and estimated - cost

-
+
+

Test Yourself

+

Explore these dream routes and learn about their distance, travel time, and estimated + cost. +

-
+
-
-
-

Route Distance

-

Draw on map

-
-
-

Travel time

-

With average speed of 200km/h

-
-
-

Estimated Costs

-

With cost of 25 millions / km

+
+ Dream Route 1 +
+

Route 1:
Lausanne to Zaragoza

+

Distance: 300 km

+

Travel Time: 1.5 hours

+

Estimated Cost: €7.5 billion

+
- +
+ Dream Route 1 +
+

Route 2:
Lausanne to Zaragoza

+

Distance: 300 km

+

Travel Time: 1.5 hours

+

Estimated Cost: €7.5 billion

+
+
-
-
- -
-

Test Yourself

-

Explore these dream routes and learn about their distance, travel time, and estimated cost. -

- -
- -
- Dream Route 1 -
-

Route 1:
Lausanne to Zaragoza

-

Distance: 300 km

-

Travel Time: 1.5 hours

-

Estimated Cost: €7.5 billion

-
+
+
-
- Dream Route 1 -
-

Route 2:
Lausanne to Zaragoza

-

Distance: 300 km

-

Travel Time: 1.5 hours

-

Estimated Cost: €7.5 billion

+
+

Did you like the interactive experience?

+

Find out more in TrainWorld!

+
+
+

Scan the QR code and get

+

20%

+

discount for museum tickets!

+
+
+ qr-code
-
- -
-
-
- -
-

Did you like the interactive experience?

-

Find out more in TrainWorld!

-
-
-

Scan the QR code and get

-

20%

-

discount for museum tickets!

-
-
- qr-code -
-
-
- -
+
-
-
- Previous -

5. The Golden Sixties and the oil crisis (second half of the 20th century)

-
-
- Next -

6. Stations

-
-
-

Practical information

+
-
-
-
-

Location

-

Prinses Elisabethplein 1030 Schaerbeek

+
+
+ Previous +

5. The Golden Sixties and the oil crisis (second half of the 20th century)

-
-

E-mail

-

b2b@trainworld.be

+
+ Next +

6. Stations

-
-

Phone

-

+32 490 47 94 00

-
- Plan your visit
-
-
-

Opening hours

-
-

Tuesday - Sunday: 10:00 - 17:00

-

Monday: Closed

+

Practical information

+ +
+
+
+

Location

+

Prinses Elisabethplein 1030 Schaerbeek

+
+
+

E-mail

+

b2b@trainworld.be

+
+
+

Phone

+

+32 490 47 94 00

+
+ Plan your visit +
+
+
+

Opening hours

+
+

Tuesday - Sunday: 10:00 - 17:00

+

Monday: Closed

+
-
-
- - - - -
-
+
+ + + + +
+ + + diff --git a/main.js b/main.js index d7e1a2d..22f25fd 100644 --- a/main.js +++ b/main.js @@ -20,8 +20,7 @@ const init = () => { readingTextAnimation(); animateOpinionCards(); // horizontalTextScroll(); -} - +}; // const horizontalTextScroll = () => { // gsap.to(".horizontal-scroll", { @@ -148,7 +147,6 @@ const animateOpinionCards = () => { }); }; - const splitText = (selector) => { const element = document.querySelector(selector); let text = element.innerText; @@ -399,7 +397,7 @@ const aheadAnimation = () => { renderer: "svg", loop: true, autoplay: true, - path: "/assets/animations/ahead-black.json", + path: "assets/animations/ahead-black.json", }); }; diff --git a/package.json b/package.json index 92972a5..574912b 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "dev": "vite --host", "build": "vite build --base=/integration3/", - "preview": "vite preview" + "preview": "vite preview --base=/integration3/" }, "devDependencies": { "vite": "^5.0.8"