Artist Page Styling v7 Isotope

Developer
Nathan Gregg
Size
4,100 Kb
Views
4,048
  1. Artist Page Styling v7 Isotope Previews
  2. Artist Page Styling v7 Isotope HTML Codes
  3. Artist Page Styling v7 Isotope CSS Codes
  4. Artist Page Styling v7 Isotope JS Codes

How do I make an artist page styling v7 isotope?

Test. What is a artist page styling v7 isotope? How do you make a artist page styling v7 isotope? This script and codes were developed by Nathan Gregg on 25 December 2022, Sunday.

Artist Page Styling v7 Isotope Previews
IQ Test

Artist Page Styling v7 Isotope - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Artist Page Styling v7 Isotope</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="its_a_page" id="artist_page">
<div id="artist_container">
</div>
</div>
<!--
var artistlist = [ { "id": "a0", "artist": "Nathan", "albums": [ { "album_title": "Album No. 1", "album_cover": "" }, { "album_title": "Album No. 2", "album_cover": "" }, { "album_title": "Various", "album_cover": "" } ], "homepage_url": "https://musiquesonntag.bandcamp.com/", "artist_image": "https://farm4.staticflickr.com/3807/13508434583_f1f5171b24_b.jpg", "biog": "Solo computer noises maker. Kind of simple and cutesy, mixed with textural noises." }, { "id": "a1", "artist": "Lypcyl", "albums": [ { "album_title": "Bedroom Songs", "album_cover": "" }, { "album_title": "Stuff", "album_cover": "" } ], "homepage_url": "https://musiquesonntag.bandcamp.com/", "artist_image": "https://farm8.staticflickr.com/7334/11804102536_d799e38e84_k.jpg", "biog": "Electronica and beats from the bedroom" }
];
--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Artist Page Styling v7 Isotope - Script Codes CSS Codes

*{margin:0;padding:0;font-family: VT323;}
.hidden { display: none;
}
#artist_page { font-family: VT323; position: absolute; top: 0; width: 100%; padding-top: 30px; margin-bottom: 100px;
}
#artist_container { position: relative; width: 80%; margin: 0 auto;
}
.artist_bit { display: flex; flex-flow: column nowrap; align-items: center; justify-content: space-between; border: 1px solid lightgrey; border-radius: 5px; overflow-y: scroll; font-size: 16px; margin-bottom: 25px;
}
#artist_page .ab_scroll { overflow: hidden;
}
#artist_page .ab_small { height: 250px; width: 350px;
}
#artist_page .ab_large { /* overflow: auto; /* remove if fixing height */ height: 400px; /* maybe fix height and scroll element */ width: 800px;
}
#artist_page .ab_chevron { position: absolute; top: 10px; left: 10px; opacity: 0.5; z-index: 100; transition: 0.4s;
}
#artist_page .ab_chevron_rotate { transform: rotate(180deg);
}
#artist_page .artist_image_div { width: 100%; overflow: hidden; transition: 0.4s;
}
#artist_page .ab_fade { opacity: 0
}
#artist_page .artist_img { width: 100%;
}
#artist_page .artist_name { color: black; text-align: center; margin: 5px; width: 100%; padding: 3px; font-weight: bold; font-size: 16px; transition: 0.4s;
}
#artist_page .ab_lg { width: 100%; position: absolute; top:0;bottom:0;left:0;right:0; transition: 0.4s;
}
#artist_page .lg_artist { width: 100%; font-size: 28px; text-align: center; height: 40px;
}
#artist_page .lg_artist p { padding: 10px;
}
#artist_page .lg_more { position: absolute; width: 100%; bottom: 0; text-align: center; opacity: 0.5; border: 1px solid pink; transition: opacity 0.5s;
}
#artist_page .album_row { padding: 20px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; align-content: flex-start; background-color: white;
}
#artist_page .album_row div {
}
#artist_page .album_title_div { flex: 2; display: flex; flex-flow: column nowrap;
}
#artist_page .album_img { width: 200px;
}
#artist_page .album_title { font-size: 36px; font-weight: bold;
}
#artist_page .album_tracks { flex: 4; display: flex; flex-flow: column nowrap; text-align: right;
}
#artist_page .album_track { padding: 10px; display: flex; flex-flow: row nowrap; justify-content: flex-end; border-bottom: 1px solid lightgrey;
}
#artist_page .album_track span { margin-right: 10px;
}
#artist_page .album_track i { padding: 0 5px;
}

Artist Page Styling v7 Isotope - Script Codes JS Codes

$(function() {
var artistlist = [ { "artist": "nathansonic", "albums": [{ "album_title": "Album No. 1", "album_cover": "https://farm2.staticflickr.com/1603/24957577775_34e3bde462.jpg", "album_tracks": [ "track number 1", "track number 2", "track number 3" ]}, { "album_title": "Album No. 2", "album_cover": "https://farm2.staticflickr.com/1661/24957577855_80eb30d513.jpg", "album_tracks": [ "track number 1", "track number 2", "track number 3" ]} ], "homepage_url": "https://musiquesonntag.bandcamp.com/", "artist_image": "https://farm4.staticflickr.com/3807/13508434583_f1f5171b24_b.jpg", "biog": "Solo computer noises maker. Kind of simple and cutesy, mixed with textural noises." }, { "artist": "nathansonic", "albums": [{ "album_title": "Album No. 1", "album_cover": "https://farm2.staticflickr.com/1603/24957577775_34e3bde462.jpg", "album_tracks": [ "track number 1", "track number 2", "track number 3" ]}, { "album_title": "Album No. 2", "album_cover": "https://farm2.staticflickr.com/1661/24957577855_80eb30d513.jpg", "album_tracks": [ "track number 1", "track number 2", "track number 3" ]} ], "homepage_url": "https://musiquesonntag.bandcamp.com/", "artist_image": "https://farm4.staticflickr.com/3807/13508434583_f1f5171b24_b.jpg", "biog": "Solo computer noises maker. Kind of simple and cutesy, mixed with textural noises." }, { "artist": "nathansonic", "albums": [{ "album_title": "Album No. 1", "album_cover": "https://farm2.staticflickr.com/1603/24957577775_34e3bde462.jpg", "album_tracks": [ "track number 1", "track number 2", "track number 3" ]}, { "album_title": "Album No. 2", "album_cover": "https://farm2.staticflickr.com/1661/24957577855_80eb30d513.jpg", "album_tracks": [ "track number 1", "track number 2", "track number 3" ]} ], "homepage_url": "https://musiquesonntag.bandcamp.com/", "artist_image": "https://farm4.staticflickr.com/3807/13508434583_f1f5171b24_b.jpg", "biog": "Solo computer noises maker. Kind of simple and cutesy, mixed with textural noises." } ];
// FUNCTION generate artist page boxes
function makeArtistBox() { var $albums = "", $artist_container = $('div#artist_container'); $.each(artistlist, function( i, item ){ var $ab_bit = $('<div class="artist_bit ab_small ab_scroll"></div>'), $ab_chevron = $('<div class="ab_chevron"><i class="fa fa-chevron-circle-down fa-2x"></i></div>'), $ab_ai = $('<div class="artist_image_div"><img class="artist_img" src="' + item.artist_image + '"/></div>'), $ab_artist_name = $('<p class="artist_name">' + item.artist + '</p>'), $ab_lg = $('<div class="ab_lg ab_fade"></div>'), $lg_artist = $('<div class="lg_artist"><p>' + item.artist + '</p></div>'), $lg_chevron = $('<div class="lg_more"><i class="fa fa-chevron-down fa-3x"></i></div>'); $ab_bit.append($ab_chevron).append($ab_ai).append($ab_artist_name).append($ab_lg); $ab_lg.append($lg_artist).append($lg_chevron); var albums = artistlist[i].albums; $.each(albums, function( i, item ){ var $album_row = $('<div class="album_row"></div>'), $album_title_div = $('<div class="album_title_div"></div>'), $album_img = $('<img class="album_img" src="' + item.album_cover + '"/>'), $album_title = $('<div class="album_title"><p>' + item.album_title + '</p></div>'), $album_tracks = $('<div class="album_tracks"></div>'); $album_title_div.append($album_img).append($album_title); $album_row.append($album_title_div).append($album_tracks); var tracks = albums[i].album_tracks; $.each(tracks, function( i, item ){ var $album_track = $('<div class="album_track"><span>' + item + '</span><i class="fa fa-play"></i><i class="fa fa-plus-circle"></i><i class="fa fa-heart"></i></div>'); $album_tracks.append($album_track); $ab_lg.append($album_row); }); }); $artist_container.append($ab_bit); });
};
makeArtistBox();
$('.ab_chevron').on("click", function(){ var $this = $(this), $parent = $this.parent('div'); $this.toggleClass('ab_chevron_rotate'); $parent.toggleClass('ab_large').toggleClass('ab_scroll'); $parent.children('.artist_name').toggleClass('ab_fade'); $parent.children('.artist_image_div').toggleClass('ab_fade'); $parent.children('.ab_lg').toggleClass('ab_fade'); $('#artist_container').isotope('layout');
})
$('.artist_bit').scroll( function(){ var topWindow = $('.artist_bit').scrollTop(); var topWindow = topWindow * 3; var windowHeight = $('.artist_bit').height(); var position = topWindow / windowHeight; //set position as percentage of how far the user has scrolled position = (1 - position) / 2; //invert the percentage $('.lg_more').css('opacity', position);
});
$('#artist_container').isotope({ itemSelector: '.artist_bit', layoutMode: 'masonry', masonry: { columnWidth: '.artist_bit', gutter: 50, isFitWidth: true }
});
});
Artist Page Styling v7 Isotope - Script Codes
Artist Page Styling v7 Isotope - Script Codes
Home Page Home
Developer Nathan Gregg
Username nathansonic
Uploaded December 25, 2022
Rating 3
Size 4,100 Kb
Views 4,048
Do you need developer help for Artist Page Styling v7 Isotope?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nathan Gregg (nathansonic) Script Codes
Name
Form and Validation V1
Artist Page Styling v5
CWB Trad Journal js
Sort Isotope
Magic Template
CWB Risk Calc
CWB logo
Pure CSS popup graph
CWB settings
Matching 2 Arrays
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!