Skip to main content top

Monet Fort - Graphic Design, Front End Web Development, and Fine Art

virtual campus visit screenshot

Your Virtual Visit

The global pandemic prevented newly admitted college students from visiting Georgia Tech's Campus. The goal of this landing page was to present some options for those students to get a feel for campus. A multi-layered paralax header was used to give emotional impact.

View Live Code Demo

Medium

  • Digital

Roles

  • Design
  • Static HTML and stylesheet development
  • Custom JQuery
  • Collaborative Drupal 8 implementation

Landing Page

virtual campus visit screenshot
virtual campus visit screenshot
virtual campus visit screenshot
virtual campus visit screenshot

Wireframe Proposals

virtual campus visit screenshot
virtual campus visit screenshot
virtual campus visit screenshot

Main Landing Page Paralax


<div>
	<img alt="Tech tower and the Atlanta skyline" src="/sites/default/files/images/virtual-visit-placeholder-header.jpg" />
</div>

<div class="editor-paralax-wrapper">	
	<div class="editor-paralax-layer1">
		
		<div class="editor-hide-small">
			<img src="/sites/default/files/images/paralax-header-text.png" alt="Text headline reading 'Your Virtual Visit'"/>
		</div>
		
		<div class="editor-hide-medium editor-hide-large">
			<img src="/sites/default/files/images/paralax-header-text-mobile.png" alt="Text headline reading 'Your Virtual Visit'"/>
		</div>
	</div>	
	
	<div class="editor-paralax-layer2">
		<img class="editor-tower-mask" src="/sites/default/files/images/paralax-header-tower.jpg" alt="the Atlanta skyline behind Tech Tower" />
	</div>

	<div class="editor-paralax-layer3">
		<img src="/sites/default/files/images/paralax-header-leaves.png" alt="Leaves at the tops of trees which move as the mouse scrolls"/>
	</div>		
</div>
 
      

/************ PARALAX HEADER************/
/** javascript functionality in /sites/all/themes/gt_subtheme/js/virtual-visit.js **/

.editor-paralax-wrapper {
	background: url('/sites/default/files/images/paralax-header-sky.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
 	width: 100%;
	overflow: hidden;
	position: relative;
	padding-top: 12%;
	left: 0;
	right: 0;
	margin: auto;
}

/* clouds drifting */
.editor-paralax-wrapper:after {
	content: '';
	background: url('/sites/default/files/images/clouds.png');
	background-size: 100% auto !important;
	background-repeat: no-repeat;
	width: 1500px;
	height: 600px;
	display: block;
	position: absolute;
	top: -5rem;
	left: 0;
	z-index: 2;
  -webkit-animation: drift 60s linear infinite;
  animation: drift 60s linear infinite;
}

@-webkit-keyframes drift {
    0% { left: -10%; opacity: 0;}
    10%{ opacity: 1;}
    90%{ opacity: 1;}
    100%{ left: 200%; opacity: 0; }
}

@keyframes drift {
    0% { left: -10%; opacity: 0;}
    10%{ opacity: 1;}
    90%{ opacity: 1;}
    100%{ left: 200%; opacity: 0; }
}


.editor-paralax-layer1 {
	transition: all 1s ease;
	position: absolute;
	z-index: 1;
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.editor-paralax-layer2 {
	transition: all 1s ease;
 	position: relative;
	width: 100%;
	height: auto;
	bottom: 0;
	z-index: 3;
	left: 0;
	right: 0;
	margin: auto;
}

.editor-paralax-layer3 {
	transition: all 1s ease;
	position: absolute;
	z-index: 4;
	width: 100%;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.editor-paralax-layer1 img,
.editor-paralax-layer2 img,
.editor-paralax-layer3 img {
	width: 100%;
	height: auto;
}


img.editor-tower-mask {
  width: 100%;
  height: auto;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1800 805' style='enable-background:new 0 0 1800 805;' xml:space='preserve'%3E%3Cpath d='M1795.2,142.1c-2.1-0.2-6.3-1-10.9-1.9c-4.6-1-9.8,2.1-9.8,2.1v-28h-10.3v12.3h-6.5v13.5l-0.8,2.7c0,0-4.4,1.1-7.5,1 c-3.1-0.2-9.2-0.6-12.6-2.5c-3.4-1.9-10.1,1.1-13-0.2c-2.9-1.3-2.1-5.6-8.6-5.2c-6.5,0.4-2.5,4.4-8.6,5.6c-6.1,1.1-8.4,5.2-11.7,4.6 c-3.3-0.6-10.3-4.2-15.1-4.4c-4.8-0.2-10.3,3.3-10.3,3.3v-37.3h2.9v-10h-20.7l-0.5,6.7h-9.5l0.3,3.9l-7.1-0.3l-0.2,2.9h-11.8v16.3 l-7.3,0.1v17.1h-15.9v-22h-3.3l-0.5-2.3h-33.1l-0.7,31.4h-7.8v4.6h-10.7V154h-4.3v-2.3h-1.8l1.3-55.3h-50.4v57.1h-10.3l-4.4,3.4 h-16.7v-3.4h-10.9v5.6c0,0-10.9-2.3-14.7-3.2c-3.8-0.9-9.6,5.5-13.2,4.3c-3.6-1.1-5.6-2.3-11.3-4c-0.9-0.3-1.9-0.3-2.9-0.3V83.5 h-1.3V70.9h-3.4v-5.4h-32.4v4.6h-2.9v15.5h-1.2l-0.5,31.2h-15.8v-2.7h-5.7v2.9l-10.6-0.4v32.2h-4.8c0,0-2.3,0.2-6.5-0.6 c-4.2-0.8-2.9,1.9-3.9,2.1s-2.2-1.3-5.3-1.7c-3.1-0.4-2.1,2.1-4,2.1s-1.9-3.1-5.7-3.4c-3.8-0.4-3.4,1.8-6.1,1.5 c-2.7-0.4-3.1-2.6-7.1-1.9s-6.9,1.9-6.9,1.9l0,0.1V49.3h1v-5.9h1.8V33.3h-32.2v10.6h2l-2,106.4c-1.5,0-10.6-0.1-12.9-0.8 c-2.6-0.9-6.7-1.8-9.9-2.5s-12-2.8-15.9-3c-3.8-0.2-4.6,2.3-8.9,2.1c-4.3-0.2-5.3-2.9-9.1-3.6c-3.8-0.8-6.1,4.5-6.1,4.5 s-10.3-1.8-14.2-1.6c-3.9,0.2-6.1-2.3-8.8-3.5c-2.7-1.2-3.1,1.3-5,1.5c-1.9,0.1-8.8-0.3-12,0.3c-3.3,0.6-10-3.4-14.4-4.4 s-5.1,3-7.7,3.4c-2.5,0.4-3.2,0.4-5.7-0.5c-2.5-0.9-3.3-0.8-4.8-1.3c-1.5-0.5-4.8,1.3-7.3,1.3s-2.9,1.1-4.8,2.8 c-1.9,1.7-6.3,0.7-9,0.9c-2.6,0.2-3.7-1.6-8.1-1.8c-4.4-0.2-7.4,4.2-10.9,4.3s-2.5-3.3-4.2-3.5s-3,2-3,2s-4,0-7.1,0.1 c-3.1,0.2-4.8-1-6.3-0.6c-1.5,0.3-5.9,0.8-8.4,1.8s-7.9-0.9-13.7-1.1c-5.8-0.3-9.3-3.9-12-3.4s-1.8,2.4-3.6,1.7c-1.8-0.7-3.8-1-7-1 c-3.2,0-4.5-2-7.1-3.1s-3.3,1.6-3.9,1.7c-0.6,0.1-6.3-1-8.4-1.6c-2.1-0.6-5,2.1-8.4,2.1c-3.4,0-9.4-1.4-13.4-1.2 c-4,0.2-5.5,2.3-7.9,5.2c-2.4,2.8-7.8,4-11.3,4.4c-3.5,0.4-15.9-5.7-19.7-5.6c-3.8,0.2-2.9,2.1-7.7,3.1c-4.8,1-11.9,2.5-11.9,2.5 h-32.6L854,94.2v-2.4l-7.2-20.4l-3.3-25.7l-2.6,25.8l-7,20.8l0.2,2.2l-20.9,57.7l-1,0.5v-0.5c0,0-3,0.1-4.7-0.9s-5.6-1.3-7.1-1.4 c-1.5-0.1-4.7,3.4-8.1,3.4c-3.4,0-6.4-3.9-9.5-3.4s-5.6,1.6-7.7,2.2s-4.8-1.5-7.5-2.1s-4.4,4-7.3,5.2c-2.9,1.1-3.4-4.2-6.3-4.2 c-2.9,0-5.9,4.2-8.6,4.4c-2.7,0.2-1.5-2.9-4.6-2.9s-13,1.1-14.9,1.1c-1.9,0-6.7-1.1-9.2-1.5c-2.5-0.4-2.3,1.5-4.6,1.3 c-2.3-0.2-0.8-0.6-3.3-1c-2.5-0.4-4.2,1-5,1.5c-0.8,0.6-1,0-7.3,0.4s-12.1-1.3-16.1-3.5c-4-2.1-11.9,0-11.9,0s-3.1,0.4-10.3,0 c-7.3-0.4-10.7,3.4-13.8,3.6c-3.1,0.2-6.3-2.5-9.2-2.7c-2.9-0.2-8.4,3.2-8.4,3.2h-14.3c0,0-0.8,1.3-1.6,1.6 c-0.8,0.3-13.6,1-16.8,2.9c-3.3,1.9-1.5,4.8-4.5,4.9s1-2.8-8.9-3.9c-10-1.1-5.9,4-11.5,4.3s-9.1-2.4-19.9-3.3 c-10.7-0.9-15.7,3.2-20.3,3c-4.6-0.2-9.4-2.9-13-3s-6.7,0.9-10.7,0c-4-0.9-3.1-1.2-6.1-1.6c-3.1-0.4-2.1,1.5-5.2,1.6 c-3.1,0-2.7-2.3-5.7-2.3c-3.1,0-1.7,0.6-4.8,1.1c-3.1,0.6-4.2-2.5-6.9-3.1s-4.9,2.9-8,2.1c-3.1-0.8-5.7-2.9-8.2-4 c-2.5-1.1-7.7,0-13.2,0s-15.7,6.7-18.1,6.4c-2.4-0.3-3-2.4-5.1-3.9s-7.5-0.7-9.9-0.3c-2.5,0.4-7.9-0.7-11.3-0.9 c-3.4-0.2-2.5,5.1-2.5,5.1h-9.6v2.7h-10.1v-6.3h-38.3v-2.9h-4.6v3.1h-8.2v4.6c0,0-1.3-0.2-4.6,0c-3.3,0.2-1.3,4.8-3.8,5.2 c-2.5,0.4-4.8-5-7.1-5c-2.3,0-5-5.2-7.1-5.4c-2.1-0.2-3.7,2.8-8.2,2.3c-4.5-0.5-1.4,2.7-5.6,3c-4.1,0.4-19.1-3-22.6-3 s-5.5,5-7.1,5.9c-1.6,0.9-3.1-2.1-5.7-3.4c-2.7-1.3-18.8,0-21.8,0c-3.1,0-3.6,1.9-3.6,1.9h-69.5l-0.3,0.3c-4.3-0.3-9.6-0.5-11.8-0.1 c-4,0.8-7.3,1.4-7.3,1.4l-18.8-0.1v1.9h-20.5v3.3h-8.4v-3.4H50.1v-3.1H36.5v6.5H0V805h806.7h991.1v-1.3l1.7,0.2V143.1v0 C1799.5,143,1797.3,142.3,1795.2,142.1z'/%3E%3C/svg%3E%0A");
  -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1800 805' style='enable-background:new 0 0 1800 805;' xml:space='preserve'%3E%3Cpath d='M1795.2,142.1c-2.1-0.2-6.3-1-10.9-1.9c-4.6-1-9.8,2.1-9.8,2.1v-28h-10.3v12.3h-6.5v13.5l-0.8,2.7c0,0-4.4,1.1-7.5,1 c-3.1-0.2-9.2-0.6-12.6-2.5c-3.4-1.9-10.1,1.1-13-0.2c-2.9-1.3-2.1-5.6-8.6-5.2c-6.5,0.4-2.5,4.4-8.6,5.6c-6.1,1.1-8.4,5.2-11.7,4.6 c-3.3-0.6-10.3-4.2-15.1-4.4c-4.8-0.2-10.3,3.3-10.3,3.3v-37.3h2.9v-10h-20.7l-0.5,6.7h-9.5l0.3,3.9l-7.1-0.3l-0.2,2.9h-11.8v16.3 l-7.3,0.1v17.1h-15.9v-22h-3.3l-0.5-2.3h-33.1l-0.7,31.4h-7.8v4.6h-10.7V154h-4.3v-2.3h-1.8l1.3-55.3h-50.4v57.1h-10.3l-4.4,3.4 h-16.7v-3.4h-10.9v5.6c0,0-10.9-2.3-14.7-3.2c-3.8-0.9-9.6,5.5-13.2,4.3c-3.6-1.1-5.6-2.3-11.3-4c-0.9-0.3-1.9-0.3-2.9-0.3V83.5 h-1.3V70.9h-3.4v-5.4h-32.4v4.6h-2.9v15.5h-1.2l-0.5,31.2h-15.8v-2.7h-5.7v2.9l-10.6-0.4v32.2h-4.8c0,0-2.3,0.2-6.5-0.6 c-4.2-0.8-2.9,1.9-3.9,2.1s-2.2-1.3-5.3-1.7c-3.1-0.4-2.1,2.1-4,2.1s-1.9-3.1-5.7-3.4c-3.8-0.4-3.4,1.8-6.1,1.5 c-2.7-0.4-3.1-2.6-7.1-1.9s-6.9,1.9-6.9,1.9l0,0.1V49.3h1v-5.9h1.8V33.3h-32.2v10.6h2l-2,106.4c-1.5,0-10.6-0.1-12.9-0.8 c-2.6-0.9-6.7-1.8-9.9-2.5s-12-2.8-15.9-3c-3.8-0.2-4.6,2.3-8.9,2.1c-4.3-0.2-5.3-2.9-9.1-3.6c-3.8-0.8-6.1,4.5-6.1,4.5 s-10.3-1.8-14.2-1.6c-3.9,0.2-6.1-2.3-8.8-3.5c-2.7-1.2-3.1,1.3-5,1.5c-1.9,0.1-8.8-0.3-12,0.3c-3.3,0.6-10-3.4-14.4-4.4 s-5.1,3-7.7,3.4c-2.5,0.4-3.2,0.4-5.7-0.5c-2.5-0.9-3.3-0.8-4.8-1.3c-1.5-0.5-4.8,1.3-7.3,1.3s-2.9,1.1-4.8,2.8 c-1.9,1.7-6.3,0.7-9,0.9c-2.6,0.2-3.7-1.6-8.1-1.8c-4.4-0.2-7.4,4.2-10.9,4.3s-2.5-3.3-4.2-3.5s-3,2-3,2s-4,0-7.1,0.1 c-3.1,0.2-4.8-1-6.3-0.6c-1.5,0.3-5.9,0.8-8.4,1.8s-7.9-0.9-13.7-1.1c-5.8-0.3-9.3-3.9-12-3.4s-1.8,2.4-3.6,1.7c-1.8-0.7-3.8-1-7-1 c-3.2,0-4.5-2-7.1-3.1s-3.3,1.6-3.9,1.7c-0.6,0.1-6.3-1-8.4-1.6c-2.1-0.6-5,2.1-8.4,2.1c-3.4,0-9.4-1.4-13.4-1.2 c-4,0.2-5.5,2.3-7.9,5.2c-2.4,2.8-7.8,4-11.3,4.4c-3.5,0.4-15.9-5.7-19.7-5.6c-3.8,0.2-2.9,2.1-7.7,3.1c-4.8,1-11.9,2.5-11.9,2.5 h-32.6L854,94.2v-2.4l-7.2-20.4l-3.3-25.7l-2.6,25.8l-7,20.8l0.2,2.2l-20.9,57.7l-1,0.5v-0.5c0,0-3,0.1-4.7-0.9s-5.6-1.3-7.1-1.4 c-1.5-0.1-4.7,3.4-8.1,3.4c-3.4,0-6.4-3.9-9.5-3.4s-5.6,1.6-7.7,2.2s-4.8-1.5-7.5-2.1s-4.4,4-7.3,5.2c-2.9,1.1-3.4-4.2-6.3-4.2 c-2.9,0-5.9,4.2-8.6,4.4c-2.7,0.2-1.5-2.9-4.6-2.9s-13,1.1-14.9,1.1c-1.9,0-6.7-1.1-9.2-1.5c-2.5-0.4-2.3,1.5-4.6,1.3 c-2.3-0.2-0.8-0.6-3.3-1c-2.5-0.4-4.2,1-5,1.5c-0.8,0.6-1,0-7.3,0.4s-12.1-1.3-16.1-3.5c-4-2.1-11.9,0-11.9,0s-3.1,0.4-10.3,0 c-7.3-0.4-10.7,3.4-13.8,3.6c-3.1,0.2-6.3-2.5-9.2-2.7c-2.9-0.2-8.4,3.2-8.4,3.2h-14.3c0,0-0.8,1.3-1.6,1.6 c-0.8,0.3-13.6,1-16.8,2.9c-3.3,1.9-1.5,4.8-4.5,4.9s1-2.8-8.9-3.9c-10-1.1-5.9,4-11.5,4.3s-9.1-2.4-19.9-3.3 c-10.7-0.9-15.7,3.2-20.3,3c-4.6-0.2-9.4-2.9-13-3s-6.7,0.9-10.7,0c-4-0.9-3.1-1.2-6.1-1.6c-3.1-0.4-2.1,1.5-5.2,1.6 c-3.1,0-2.7-2.3-5.7-2.3c-3.1,0-1.7,0.6-4.8,1.1c-3.1,0.6-4.2-2.5-6.9-3.1s-4.9,2.9-8,2.1c-3.1-0.8-5.7-2.9-8.2-4 c-2.5-1.1-7.7,0-13.2,0s-15.7,6.7-18.1,6.4c-2.4-0.3-3-2.4-5.1-3.9s-7.5-0.7-9.9-0.3c-2.5,0.4-7.9-0.7-11.3-0.9 c-3.4-0.2-2.5,5.1-2.5,5.1h-9.6v2.7h-10.1v-6.3h-38.3v-2.9h-4.6v3.1h-8.2v4.6c0,0-1.3-0.2-4.6,0c-3.3,0.2-1.3,4.8-3.8,5.2 c-2.5,0.4-4.8-5-7.1-5c-2.3,0-5-5.2-7.1-5.4c-2.1-0.2-3.7,2.8-8.2,2.3c-4.5-0.5-1.4,2.7-5.6,3c-4.1,0.4-19.1-3-22.6-3 s-5.5,5-7.1,5.9c-1.6,0.9-3.1-2.1-5.7-3.4c-2.7-1.3-18.8,0-21.8,0c-3.1,0-3.6,1.9-3.6,1.9h-69.5l-0.3,0.3c-4.3-0.3-9.6-0.5-11.8-0.1 c-4,0.8-7.3,1.4-7.3,1.4l-18.8-0.1v1.9h-20.5v3.3h-8.4v-3.4H50.1v-3.1H36.5v6.5H0V805h806.7h991.1v-1.3l1.7,0.2V143.1v0 C1799.5,143,1797.3,142.3,1795.2,142.1z'/%3E%3C/svg%3E%0A");
}

@media (max-width: 767.98px) { 
	.editor-paralax-wrapper {
		padding-top: 20%;
	}		
}

@media only screen and (max-width: 31em) {
	.editor-paralax-wrapper {
	  padding-top: 50%;
	  width: 200%;
	  left: -50%;
	}
}
			

(function($){
  Drupal.behaviors.slideshow = {
    attach: function (context, settings) {

	    if ($('.editor-paralax-wrapper').length > 0) {
	      //PARALAX SCROLLING HEADER
	      //style for this functionality is in /sites/all/themes/gt_subtheme/css/custom.css **/
	  		var layer1 = document.querySelector('.editor-paralax-layer1'),
	  		    layer2 = document.querySelector('.editor-paralax-layer2'),
	  		    layer3 = document.querySelector('.editor-paralax-layer3');
	
	  		window.addEventListener('scroll', function() {
	  		    var scrolled = window.scrollY;
	  		    layer1.style.transform = "translate(0px," + scrolled/10 +"%)" + "scale(1.1)";
	  		    layer2.style.transform = "translate(0px," + scrolled/8 +"%)"  + "scale(1.2)";
	  		    layer3.style.transform = "translate(0px," + scrolled/6 +"%)"  + "scale(1.4)";
	  		});
	
	  		var forEach = function (array, callback) {
	  		  for (var i = 0; i < array.length; i++) {
	  		    callback.call(null, i, array[i]);
	  		  }
	  		};
	      //end paralax
	    }

    }
  }
})(jQuery);
		

Code snippets for a header featuring parallax layers to mimic flying over campus. This one-time-use block was built using HTML inserted with CKeditor for easy editing access.

virtual campus visit screenshot